【郑州分院第一百一十六期】DOM常用操作有哪些？

1.背景介绍

       DOM即（文档对象模型），DOM描 绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于 Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨 平台、语言中立的方式。

2.知识剖析

DOM可以将任何HTML描绘成一个由多层节点构成的结构。

DOM树

       HTML文档可以说由节点构成的集合，DOM节点有: 

1、元素节点：下图中html、body、p等都是元素节点，即标签。

2、文本节点:向用户展示的内容，如li.../li中的"JavaScript、DOM、CSS"等文本。 

3、属性节点:元素属性，如a标签的链接属性href=""。

demo1

DOM常用操作之查找节点

DOM节点类型我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。demo

document.getElementById('id属性值');返回带有指定 ID 的元素

document.getElementsByClassName('class属性值');返回拥有指定class的对象集合

document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合

document.getElementsByName('name属性值');返回拥有指定名称的对象集合

DOM常用操作之新建节点

createElement、createTextNode

document.createElement('元素名');创建新的元素节点

document.createAttribute('属性名');创建新的属性节点

document.createTextNode('文本内容');创建新的文本节点

document.createComment('注释节点');创建新的注释节点

document.createDocumentFragment( );创建文档片段节点

DOM常用操作之删除节点

parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性

DOM常用操作之修改节点

例子：添加属性节点，修改属性值element.setAttributeNode( attributeName );

parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点element.setAttributeNode( attributeName ); 若原元素已有该节点，此操作能达到修改该属性值的目的element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的

3.常见问题

如何通过class和tag调用元素?如何对其设置属性？

4.解决方案

一个页面中常常有多个class相同的元素，也有多个标签相同的元素，在调用时方法如下示例

5.编码实战

（见上文链接）

6.扩展思考

Html5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性， 这个属性始终会引用DOM中当前获得了焦点的元素。 另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。 我们可以去学习HTML5中的一些新内容。

7.参考文献

参考一：《JavaScript高级程序设计》

参考二：掌握dom操作

参考二：DOM常用操作

参考二：js之删除节点、替换节点、插入节点

8.更多讨论

DOM的优缺点有哪些？

DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。

DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

PPT    https://ptteng.github.io/PPT/PPT/js-01-DOM.html#/

视频    https://v.qq.com/x/page/d0505fxd975.html

dom常用操作_腾讯视频