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改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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仿盗链代码
2012/06/03 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
php写app用的框架整理
2019/09/29 PHP
PHP重载基础知识回顾
2020/09/10 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
用Python实现随机森林算法的示例
2017/08/24 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
银行竞聘演讲稿范文
2014/04/23 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
监察建议书
2015/02/04 职场文书
优秀教师个人总结
2015/02/11 职场文书
2016小学新学期寄语
2015/12/04 职场文书