第12章 DOM2和DOM3
DOM2和DOM3分为许多模块，分别描述了DOM的某个非常具体的子集。
一、DOM的变化
DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。从某种意义上讲，实现这一目的很大程度意味着对命名空间的支持。这些变化主要在以下方面：
针对XML命名空间的变化，下面的类型都针对命名空间进行了变化：
1. Node 类型
2. Document 类型
3. Element 类型
4. NamedNodeMap 类型
DOM的其他部分在“DOM2级核心”中也发生了一些变化。这些变化与 XML命名空间无关，而是更倾向于确保 API的可靠性及完整性，主要有：
1. DocumentType 类型的变化
2. Document 类型的变化
3. Node 类型的变化
4. 框架的变化
二、样式
在 HTML中定义样式的方式有3种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用style特性定义针对特定元素的样式。“DOM2级样式”模块围绕这3种应用样式的机制提供了一套 API。要确定浏览器是否支持DOM2级定义的 CSS能力，可以使用下列代码。
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
样式的变化主要体现在下面的几个方面：
1、访问元素的样式（包括） ： DOM样式属性和方法 、 计算的样式;
2、操作样式表；
3、与HTML元素样式相关的如何确定页面中元素的大小。
三、遍历
“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker（基于深度优先搜索）。
使用如下代码可以检测浏览器对 DOM2级遍历能力的支持情况。
1 var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0"); 2 var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 3 var supportsTreeWalker = (typeof document.createTreeWalker == "function");
1、NodeIterator
NodeIterator 类型的两个主要方法是 nextNode()和 previousNode()，基本使用如下：
以下面的HTML片段为例，
<div id="div1">
<p><b>Hello</b> world!</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul> </div>
若想要遍历<div>元素中的所有元素，可以使用下列代码：
1 var div = document.getElementById("div1"); 2 var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false); 3 var node = iterator.nextNode(); 4 while (node !== null) { 5 alert(node.tagName); //输出标签名 6 node = iterator.nextNode(); 7 }
2、TreeWalker
TreeWalker是NodeIterator的一个更高级的版本。TreeWalker 真正强大的地方在于能够在DOM结构中沿任何方向移动。使用TreeWalker遍历DOM树，对于上面的HTML片段，即使不定义过滤器，也可以取得所有<li>元素，如下面的代码所示。
1 var div = document.getElementById("div1"); 2 var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false); 3 walker.firstChild(); //转到<p> 4 walker.nextSibling(); // 转到<ul> 5 var node = walker.firstChild(); //转到第一个<li> 6 while (node !== null) { 7 alert(node.tagName); 8 node = walker.nextSibling(); 9 }
四、范围
1、范围是选择DOM结构中特定部分，然后再执行相应操作的一种手段。
以下面的 HTML代码为例。
<!DOCTYPE html>
<html>
<body>
<p id="p1"><b>Hello</b> world!</p>
</body>
</html>
我们可以使用下列代码来创建范围：
1 var range1 = document.createRange(); 2 var range2 = document.createRange(); 3 var p1 = document.getElementById("p1"); 4 range1.selectNode(p1); 5 range2.selectNodeContents(p1);
2、使用范围选区可以在删除文档中某些部分的同时，保持文档结构的格式良好，或者复制文档中的相应部分。
3、IE8及更早版本不支持“DOM2级遍历和范围”模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于文本的范围操作。IE9完全支持DOM遍历。
原文：https://www.cnblogs.com/xiaoxb17/p/11901954.html