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

, 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1、DOM的架构

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

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

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

1、先创建一个使用CSS美化的列表 2、加一个div 元素. 3、你现在应该看到如下图：

4、根据上图获取元素总数 备注：大家使用可以再body加入<button type ="button" onclick = "alert(Tools.getElementCount(document))">获取元素个数</button> 5、将文本全部大写 备注：大家使用可以再body加入<button type ="button" onclick = "Tools.ModifyElement(document)">大写</button> 效果：

6、给列表排序 备注：大家使用可以再body加入<button type ="button" onclick = "Tools.documentSort('list')">排序</button> 效果：

7、动态插入列表项（子节点) 备注：大家使用可以再body加入<button type ="button" onclick="Tools.insertElement('myblog','li');">插入</button> 效果：

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

9、动态添加样式和删除样式 1、样式表 2、工具函数（动态添加、删除样式） 3、在body中加入如下元素 效果：

没添加样式的样子加了样式之后。

小结：Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧！其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。 （很多没有备注，大家有问题可以给我留言!)

推荐整理分享JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）(javascript高级编程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript高级程序编程,javascript高级语言,javascript高级篇,javascript高级程序设,javascript高级语法,javascript 高级教程,javascript 高级教程,javascript高级篇,内容如对您有帮助，希望把文章链接给更多的朋友！

window.parent与window.openner区别介绍 今天总结一下js中几个对象的区别和用法：首先来说说parent.window与top.window的用法"window.location.href"、"location.href"是本页面跳转"parent.location.href"是上一层

你需要知道的个最佳javascript开发实践小结 尽管很多的开发人员都乐于颂扬javascript，但是仍旧有人看到它的阴暗面。使用很多javascript代码的web页面会加载很慢，过多的使用javascript使得网页丑陋

js split 的用法和定义 js split分割字符串成数组的实例代码 关于jssplit的用法其它也不多说什么，下面直接举例给大家看看scriptlanguage="javascript"str="2,2,3,5,6,6";//这是一字符串varstrs=newArray();//定义一数组strs=str.split(",