JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)


Posted in Javascript onApril 07, 2012

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力!

1、DOM的架构

<html> 
<head> 
<title>document</title> 
</head> 
<body> 
<h1>CSS Demo</h1> 
<p>我喜欢美女,特别是高个的美女</p> 
</body> 
</html>

这个文档的DOM表示如下图:

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

图片表示一个HTML文档的树.

所有DOM树结构表现为不同种类的Node对象的一个数,firstChild,lastChild,nextSibling,previousSibling和ParentNode属性提供遍历节点的树的一种办法,appendChild,removeChild,replaceChildh和insertBefore这样的方法可以像文档中添加节点或者从文档中删除节点。不明白没关系接下来我将用大量的例子让你明白。

1、先创建一个使用CSS美化的列表
<style type="text/css"> 
body{ margin:0px; padding:0px; } 
#container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px; float:left; } 
#container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;} 
#container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;} 
#container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;} 
#container ul li a:hover{background-color:red; color:#000000; } 
</style>

2、加一个div 元素.
<div id="container"> 
<ul id="list"> 
<li><a href="#">Home</a></li> 
<li id="myblog"><a href="#">MyBlog</a></li> 
<li><a href="#">Sport</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Contane</a></li> 
</ul> 
</div>

3、你现在应该看到如下图:

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

4、根据上图获取元素总数
var Tools = {}; 
Tools.getElementCount = function(e){ 
var count =0; 
elementTotal(e); 
document.table.txt.value = "element:"+ count; 
function elementTotal(e) 
{ 
if(e.nodeType == 1) count++; 
var children = e.childNodes; 
for(var i = 0;i<children.length;i++) 
{ 
elementTotal(children[i]); 
} 
} 
};

备注:大家使用可以再body加入<button type ="button" onclick = "alert(Tools.getElementCount(document))">获取元素个数</button>
5、将文本全部大写
Tools.ModifyElement = function modify(e){ 
if(e.nodeType == 3) 
e.data = e.data.toUpperCase(); 
else 
{ 
for(var i = e.firstChild;i!=null;i=i.nextSibling) 
modify(i); 
} 
};

备注:大家使用可以再body加入<button type ="button" onclick = "Tools.ModifyElement(document)">大写</button>

效果:

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六) 

6、给列表排序
Tools.documentSort = function(e){ 
var textArray = []; 
if(typeof e =="string") e = document.getElementById(e); 
for(var x = e.firstChild; x!= null;x=x.nextSibling) 
if(x.nodeType == 1) textArray.push(x); 
textArray.sort(function(n,m){ 
var s = n.firstChild.firstChild.data; 
var t = m.firstChild.firstChild.data; 
if(s>t) return -1; 
else if(s<t) return 1; 
else return 0; 
});

备注:大家使用可以再body加入<button type ="button" onclick = "Tools.documentSort('list')">排序</button>

效果:

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

7、动态插入列表项(子节点) 
Tools.insertElement = function(n,e){ 
if(typeof n == "string") n = document.getElementById(n); 
var li = document.createElement(e); 
var a = document.createElement("a"); 
a.setAttribute("href","#"); 
var txt = document.createTextNode("HotBlog"); 
a.appendChild(txt); 
li.appendChild(a); 
var parent = n.parentNode; 
parent.insertBefore(li,n); 
};

备注:大家使用可以再body加入<button type ="button" onclick="Tools.insertElement('myblog','li');">插入</button>

效果: 

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

8、使用javascript类动态创建文档
1、样式表
.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//这里的图片大家要该一下 
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}

2、javascript类
function Tooltip() 
{ 
this.tooltip = document.createElement("div"); 
this.tooltip.style.position = "absolute"; 
this.tooltip.className = "tooltip"; 
this.content = document.createElement("div"); 
this.content.style.position = "relative"; 
this.content.className = "toolcontent"; 
this.tooltip.appendChild(this.content); 
} 
Tooltip.prototype.show = function(text,x,y) 
{ 
this.content.innerHTML = text; 
this.tooltip.style.left = x+"px"; 
this.tooltip.style.top = y+"px"; 
this.tooltip.style.visibility = "visible"; 
if(this.tooltip.parentNode != document.body) 
document.body.appendChild(this.tooltip); 
}; 
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";}; 
var t = new Tooltip(); 
function hide() 
{ 
t.hide(); 
} 
function show() 
{ 
t.show("hello ",300,0); 
} 
function init() 
{ 
document.operator.show.onclick = show; 
document.operator.hide.onclick = hide; 
}

备注:配合上面使用必须还完成以下步骤:1、将body中的onload=init();2 在body中添加 :
<form name = "operator">
<input type = "button" value = "隐藏" name = "hide"/>
<input type = "button" value = "显示" name = "show">
</form>
效果:(隐藏看到什么了) 

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

9、动态添加样式和删除样式

1、样式表

.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px;float:left;} 
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;} 
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;} 
.container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;} 
.container ul li a:hover{background-color:red; color:#ffffff; }

2、工具函数(动态添加、删除样式)
var CSSclass = {}; 
CSSclass.is = function(e,c){ 
if(typeof e == "string") e = document.getElementById(e); 
var classes = e.className; 
if(!classes) return false; 
if(classes == c) return true; 
return e.className.search("\\b" +c +"\\b*") != -1; 
}; 
CSSclass.add = function(e,c){ 
if(typeof e == "string") e = document.getElementById(e); 
if(CSSclass.is(e,c))return; 
//if(e.className) c=""+c; 
e.className += c; 
}; 
CSSclass.remove = function(e,c){ 
if(typeof e == "string") e = document.getElementById(e); 
//e.id = e.id.replace(new RegExp("\\b" +e.id +"\\b\\s*","g"),""); 
e.className = e.className.replace(new RegExp("\\b"+c+"\\b\\s*","g"),""); 
};

3、在body中加入如下元素
<div id="con"> 
<ul id="list"> 
<li><a href="#">Home</a></li> 
<li id="myblog"><a href="#">MyBlog</a></li> 
<li><a href="#">Sport</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Content</a></li> 
</ul> 
<button type="button" name ="add" onclick = "CSSclass.add('con','container');">动态添加样式</button> 
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">动态删除样式</button>

效果: 

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
没添加样式的样子
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
加了样式之后。

小结:Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧!其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。

(很多没有备注,大家有问题可以给我留言!) 

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
js实现验证码功能
Jul 24 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 #Javascript
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 #Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 #Javascript
为原生js Array增加each方法
Apr 07 #Javascript
jquery 操作DOM案例代码分享
Apr 05 #Javascript
jquery 操作DOM的基本用法分享
Apr 05 #Javascript
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
vue router demo详解
2017/10/13 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
python版大富翁源代码分享
2018/11/19 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python实现图片压缩代码实例
2019/08/12 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
.net软件工程师面试题
2015/03/31 面试题
公司离职证明范本(汇总)
2014/09/10 职场文书
法学专业求职信范文
2015/03/19 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL