前言

一、节点（Node）

1、Node 类型

（1）、Node类型的属性

（3）、Node类型的方法

2、Document 类型

（1）、Document 类型的特征

（2）、Document 类型的属性

（3）、Document 类型的方法

3、Element 类型

（1）、Element 类型的特征

（2）、Element 类型的属性

（3）、Element 类型的方法

4、Text 类型

（1）、Text 类型的特性

（2）、Text 类型的属性

（3）、Text 类型的方法

5、Comment 类型（了解）

6、CDATASection 类型（了解）

7、DocumentType 类型（了解）

8、DocumentFragment 类型（了解）

9、Attr 类型（了解）

二、DOM1 级操作技术

1、动态脚本

（1）、通过插入外部文件来添加动态脚本（该脚本会立即运行）

（2）、直接插入 JavaScript 代码来添加动态脚本

2、动态样式

（1）、通过插入外部文件来实现动态样式

（2）、直接插入 CSS 代码来实现动态样式

3、操作表格

（1）、Table 对象的描述

（2）、Table 对象的属性

（3）、Table 对象的方法

4、使用 NodeList

三、DOM1 级的扩展

1、DOM1 级的扩展属性

（1）、classList 属性——方便对 class 属性进行增删改查

（2）、activeElement 属性——辅助管理 DOM 焦点

（3）、readyState 属性——文档状态

（4）、compatMode 属性——兼容模式

（5）、head 属性

（6）、charset 属性——字符集

（7）、children 属性

（8）、innerHTML 属性和 outerHTML 属性——插入标记

（9）、innerText 属性和 outerText 属性——插入文本

（10）、自定义数据属性

2、DOM1 级的扩展方法

（1）、getElementsByClassName() 方法——获取元素

（2）、hasFocus() 方法——获取焦点

（3）、insertAdjacentHTML() 方法——插入标记

（4）、scrollIntoView() 方法——浏览器窗口滚动

（5）、contains() 方法——检测某个节点是不是另一个节点的后代

3、文档模式

四、DOM2

1、DOM2 中 DOM 的变化

（1）、节点变化

（2）、框架的变化

2、样式

（1）、访问元素的样式

（2）、操作样式列表

（3）、元素大小

3、遍历

（1）、NodeIterator 类型遍历

（2）、TreeWalker 类型遍历

4、范围

（1）、DOM 中的范围

（2）、IE8 及其更早版本的范围

五、DOM3

1、DOM 的变化

（1）、Node 类型的变化

前言

DOM 对象是文档对象模型（Document Object Model，简称 DOM）。
DOM 对象是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。
DOM 对象描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM2 和 DOM3 都是对 DOM1 的扩展。

一、节点（Node）

DOM 对象可以将任何 HTML 和 XML 文档描绘成一个节点树。

每个文档只能有一个文档元素。在 HTML 中，文档元素始终都是 <html> 元素。在 XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。

1、Node 类型

所有的节点都继承自Node类型，因此所有的节点都具有Node类型的所有属性和方法。

（1）、Node类型的属性

①、nodeType 属性

通过 nodeType 可以确定一个节点属于那一个类型的节点。

nodeType 的值有两种，一种是 12 个数值表示节点的类型，另一种是用字符常量来表示，因为第二种方法不适用于 IE 浏览器，所以全部使用第一种方法来表示，如下表：

常量名	常量值	节点类型	节点描述
Node.ELEMENT_NODE	1	Element	元素
Node.ATTRIBUTE_NODE	2	Attr	属性
Node.TEXT_NODE	3	Text	元素或属性中的文本内容
Node.CDATA_SECTION_NODE	4	CDATASection	文档中的 CDATA 部（不会由解析器解析的文本）
Node.ENTITY_REFERENCE_NODE	5	EntityReference	实体引用
Node.ENTITY_NODE	6	Entity	实体
Node.PROCESSING_INSTRUCTION_NODE	7	ProcessingInstruction	处理指令
Node.COMMENT_NODE	8	Comment	注释
Node.DOCUMENT_NODE	9	Document	整个文档（DOM 树的根节点）
Node.DOCUMENT_TYPE_NODE	10	DocumentType	向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE	11	DocumentFragment	轻量级的 Document 对象（文档的某个部分）
Node.NOTATION_NODE	12	Notation	DTD 中声明的符号

上表中，加粗部分为常用的节点类型。

使用 nodeType 获取节点（node）：

// html 中
<div id="box">hello world</div>// javaScript 中
var element = document.getElementById("box");
var attr = document.getElementById("box").getAttributeNode("id");
var text = document.getElementById("box").firstChild;console.log(element.nodeType);         //1
console.log(attr.nodeType);            //2
console.log(text.nodeType);            //3

上述代码中，element.nodeType 是 1，对应上表中的元素节点，即 element 变量是一个元素节点。同理可得，attr 变量是一个属性节点，text 变量是一个文本节点。

②、nodeName 和 nodeValue 属性

通过 nodeName 和 nodeValue 属性可以获取节点的具体信息。

节点的类型不同， nodeName 和 nodeValue 属性的值也不同，所以获取节点信息之前必须先判断节点的类型。
对于元素节点，nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值始终为 null。

③、childNodes 属性

每个节点都有一个 childNodes 属性，其中包含着一个 NodeList 对象，用于保存有序的节点。

NodeList 对象实际上是一个基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反应在 NodeList 对象中。

NodeList 对象是一个类数组对象，可以使用方括号语法，有 length 属性。

访问 NodeList 对象里的值时，可以使用方括号语法，也可以使用 childNodes 属性的 item() 方法。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

可以将NodeList对象转换为数组：

//IE8及之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);

要在IE中将NodeList转换为数组，必须手动枚举所有成员：

// 所有浏览器中都可以运行
function convertToArray(nodes){var array = null;try{array = Array.prototype.slice.call(nodes,0); //针对非IE浏览器}catch(ex){array = new Array();for(var i= 0,len=nodes.length;i<len;i++){array.push(nodes[i]);}}return array;
}

④、previousSbling 和 nextSbling 属性

previousSbling 和 nextSbling 属性分别表示当前节点的前一个节点和当前节点的后一个节点，所以它们可以访问 childNodes 属性里列表中的同胞节点。

列表中的第一个节点的 previousSbling 值为 null，列表中最后一个节点的 nextSbling 值为 null。

⑤、parentNode 属性

每个节都有一个 parentNode 属性，该属性指向文档中的父节点。

⑥、ownerDocument 属性

ownerDocument 属性指向表示整个文档的文档节点。任何节点存只存在于他所在的文档中，不可能同时存在于多个文档中。通过 ownerDocument 属性，我们不必再节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

（3）、Node类型的方法

①、appendChild() 方法——尾部添加节点

接受一个参数：插入的节点。
返回新插入的节点。
如果传入到 appendChild() 方法中的节点在文档中已经存在，那就将该节点从原来的位置移动到新位置。

②、insertBefore() 方法——特定位置前添加节点

接收两个参数：要插入的节点和作为参照的节点。要插入的节点在参照节点之前。
返回新插入的节点。

③、replaceChild() 方法——替换节点

接收两个参数：要插入的节点和要替换的节点。
返回被替换的节点。

④、removeChild() 方法——删除节点

接收一个参数：要被移除的节点。
返回被移除的节点。

⑤、cloneNode() 方法——拷贝节点

接收一个布尔值参数，表示是否执行深拷贝。参数为 true 时，执行深拷贝，赋值节点及其整个子节点树，参数为 false 时，执行浅拷贝，只复制节点本身。
返回节点副本。节点副本虽然属于当前文档，但它没有父节点，所以就成为了一个“孤儿”，除非通过 appendChild()、insertBefore() 或 replaceChild() 方法将它添加到文档中。
cloneNode() 方法不会复制添加到 DOM 节点的 JavaScript 属性，比如“事件处理程序”等。但是 IE 浏览器上存在一个 bug，即它会复制事件处理程序，所以建议在复制之前先移除事件处理程序。

⑥、normalize() 方法——处理文本节点

当某个节点调用这个方法时，就会在该节点的后代中查找，若有空文本节点则将其删除，若找到相邻的文本节点，则将它们合并为一个文本节点。

2、Document 类型

在 JavaScript 中，Document 类型表示文档。

在浏览器中，document 对象是 HTMLDocument（继承自 Document 类型）类型的一个实例，表示整个 HTML 页面。而且，document 对象是 window 对象的一个属性，因此 document 对象可以作为一个全局对象被访问。

（1）、Document 类型的特征

Document 节点具有以下特征：

nodeType 的值为 9；
nodeName 的值为 #document；
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；
其子节点可能是一个 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction 或 Comment。

（2）、Document 类型的属性

①、childNodes 属性

childNodes 访问文档元素。

②、documentElement 属性

documentElement 始终指向 HTML 页面中的 < html > 元素。

③、body 属性

body 属性指向 < body > 元素。

var html = document.documentElement;     // 取得对 <html> 标签的引用
var body = document.body;                // 取得对 <body> 标签的引用

④、title 属性

title 属性显示在浏览器窗口的标题栏或者标签页上。

var originalTitle = document.title;             // 获得文档标题
document.title = "New page title";              // 设置文档标题

⑤、URL 属性

URL 属性包含页面完整的 URL。

⑥、domain 属性

domain 属性只包含页面的域名。

⑦、referrer 属性

referrer 属性保存着链接到当前页面的那个页面的 URL。

/*** 假设页面来自 https://mbd.baidu.com/newspage/data* （在百度搜索引擎里随便点开了一个新闻）**/// 取得完整的 URL
var url = document.URL;                       // https://mbd.baidu.com/newspage/data// 取得域名
var domain = document.domain;                 // mbd.baidu.com// 取得来源页面的 URL
var referrer = document.referrer;             // https://www.baidu.com/

上述代码中，可以看出 URL 和 domain 是相互关联的。

另外，domain 是可以设置的，但并非可以设置任何值。

/*** 假设页面来自 https://mbd.baidu.com/newspage/data* （在百度搜索引擎里随便点开了一个新闻）**/document.domain = "baidu.com";               // "baidu.com"
document.domain = "mbd.baidu.com";           // "mbd.baidu.com"
document.domain = "www.baidu.com";           // 报错

JavaScript 中存在着跨域问题，我们可以通过将每个页面的 document.domain 设置为相同的值，这些页面就可以相互访问对方包含的 JavaScript 对象了。

⑧、document.anchors 属性

document.anchors 属性包含文档中所有带有name特性的 < a > 元素；

⑨、document.form 属性

document.form 属性包含所有文档中所有的 < form > 元素；

⑩、document.imges 属性

document.imges 属性包含文档中所有的 < img > 元素，与 document.getElementsByTagName(“img”) 得到的结果相同；

⑪、document.links 属性

document.links 属性包含文档中所有带 href 特性的 < a > 元素。

（3）、Document 类型的方法

①、getElementById()

getElementById() 方法接收一个参数——要获取的元素的 ID（有大小写之分），并返回相应元素或 null。

// html 中
<div id="myDiv"> Hello World </div>// javaScript 中
var div = document.getElementById("myDiv");         // 取得 div 元素的引用

②、getElementsByTagName()

getElementsByTagName() 方法接收一个参数——要获取的元素的标签名，并返回一个包含零或多个元素的 NodeList 对象。

// html 中
<img src="aaa.jpg" name="tuTu">// javaScript 中
var images = document.getElementsByTagName("img");alert(images.length);                         // 1
alert(images[0].src);                         // ...images/111.jpg
alert(images.item(0).src);                    // ...images/111.jpg
console.log(images.namedItem("tuTu").src);    // ...images/111.jpg

拓展：在 HTML 文档中，该方法会返回一个 HTMLCollection 对象，作为一个动态集合，HTMLCollection 对象与 NodeList 对象类似，都是类数组，具有 length 属性，可以使用方括号语法或 item() 方法来访问 HTMLCollection 对象中的项，除此之外，HTMLCollection 对象还有一个独有的方法 nameItem() 方法来取得 HTMLCollection 中的项。

③、getElementsByName()

getElementsByName() 方法只有 HTMLDocument 支持使用，返回一个包含给定 name 特性的所有元素的 HTMLCollection 对象，也是一个类数组。

// html 中
<img src="./images/111.jpg" name="color">
<input type="text" name="color" value="21">// javaScript 中
var ele = document.getElementsByName("color");console.log(ele.length);                 // 2
console.log(ele[1].type);                // text
console.log(ele.item(1).type);           // text

拓展：在 JS 和 CSS 中，星号（*）通常表示“全部”。想要获得文档中的所有元素，可以向 getElementByTagName() 中传入“ * ”。

④、write() —— 原样写入。接受一个字符串，即写到输出流的文本。

⑤、writeln() —— 末尾添加(\n)。接受一个字符串，即写到输出流的文本。

⑥、open() —— 打开网页的输入流。

⑦、close() —— 关闭网页的输入流。

⑧、querySelector()

querySelector() 方法，获取与某一组选择器匹配的第一个元素。

接收一个参数：一组选择器。

返回与该模式匹配的第一个元素，如果没有找到匹配元素，返回null。

// html 中
// <div id="mydiv">hello</div>// JavaScript 中
var body = document.querySelector("#myDiv");
console.log(body);          // <div id="myDiv">hello</div>

⑨、querySelectorAll()

querySelectorAll() 方法，返回所有与某一组选择器匹配的元素列表 NodeList 对象。

// html 中
<div id="myDiv">mydiv</div>
<div id="yyy">mydiv</div>
<div id="myDiv">mydiv</div>// JavaScript 中
var div = document.querySelectorAll("#myDiv");
console.log(div);         // NodeList(2) [div#myDiv, div#myDiv]

3、Element 类型

Element 类型用于表现 XML 或 HTML 元素，它提供了对元素的标签名，子节点及特性访问。
所有 Document 对象下的对象都继承自 Element。
一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如，HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级的接口中被进一步制定的。

（1）、Element 类型的特征

nodeType 值为 1；
nodeName 的值为元素标签名；
nodeValue 的值为 null；
parentNode 可能是 Document 或 Element；
其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 EntityReferance。

（2）、Element 类型的属性

Element 类型的所有属性继承自它的祖先接口 Node，并且扩展了 Node 的父接口 EventTarget，并且从以下部分继承了属性：ParentNode、ChildNode、NonDocumentTypeChildNode，和 Animatable。

①、attibutes 属性

attibutes 属性，返回一个注册到指定节点的所有属性节点的实时集合 NamedNodeMap。NamedNodeMap 与 NodeList 类似，是一个类数组对象。

NamedNodeMap 的方法：

getNamedItem(name)：获取 nodeName 属性等于 name 的节点；
removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；
setNameItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；
item(pos)：获取位于数字 pos 位置处的节点。

一般，attributes的方法不够方便，因此开发人员更多的会使用 getAttribute()，setAttribute() 和 removeAttribute() 方法（详见下文 Element 类型的方法）。

②、tagName 属性

tagName 属性，返回元素的标签名称，与 nodeName 属性一致。

由于在 HTML 中，标签名始终都以大写表示，而 XML 中，标签名始终都与源代码一致，使用时最好将获取到的标签名通过 toLowerCase() 方法统一转为小写。

if(element.tagName.toLowerCase() == 'div'){// 一些操作
}

③、className 属性

className 属性获取并设置指定元素的 class 属性的值。

// html 中
<div class="myDiv"></div>// JavaScript 中
var div = document.getElementById('myDiv');
if(div.className == 'active'){div.className="";
}else{div.className="active";
}

④、id 属性

id 属性表示元素在文档中的唯一标识符。

// html 中
<div id="myDiv"></div>// JavaScript 中
var div = document.getElementById('myDiv');
if(div.id == 'active'){div.className="";
}else{div.id="active";
}

（3）、Element 类型的方法

①、getAttribute() 方法

getAttribute() 方法，获取属性的当前值，如果给定属性不存在则返回值为 null 或 "" 。

接收一个参数：获取其值的属性名称。

返回一个字符串。

// html 中
<div id="myDiv" align="align"></div>// JavaScript 中
var div = document.getElementById("myDiv");
var align = div.getAttribute("align");
console.log(align);                         //"align"

在 IE7 及其以前的版本中，通过 getAttribute() 方法无法访问 style 属性和 onclick 的事件处理特性，返回值的类型与属性值的类型一致，即 getAttribute("style") 返回一个对象，getAttribute("onclick") 返回一个函数。所以该方法不常用。

②、setAttribute() 方法

setAttribute() 方法，设置指定元素的属性值。如果该属性已存在，则更新该值。否则添加具有指定名称和值的新属性。

接收两个参数：设置其值的属性名称和该属性名对应的值（若指定的是非字符串则自动转换为字符串，且不区分大小写）。

// html 中
<div id="myDiv"></div>// JavaScript 中
var div = document.getElementById("myDiv");
div.setAttribute("id", "ddd");
div.setAttribute("title", "hi");
console.log([div.id, div.title]);            // ["ddd", "hi"]

在 IE7 及其以前的版本中，setAttribute() 方法存在一些异常行为，通过这个方法设置 class 和 style，没有任何效果，所以该方法不常用。

③、removeAttribute() 方法

removeAttribute() 方法，用于从一个元素中删除一个属性。

接收一个参数：要删除的属性名。

// html 中
<div id="myDiv" align="align"></div>// JavaScript 中
var div = document.getElementById("myDiv");
var align = div.removeAttribute("align");

IE6 及以前的版本不支持该 removeAttribute() 方法。

④、hasAttribute() 方法

hasAttribute() 方法，用来检测指定的元素是否具有指定的属性。

接收一个参数：表示属性名称的字符串。

返回一个布尔值（true / false）。

// html 中
<div id="myDiv" name="myName"></div>// JavaScript 中
var div = document.getElementById("myDiv");
console.log(div.hasAttribute("name"));           // true

⑤、querySelector() 方法

与 Dcument 类型中的 querySelector() 方法一样。

⑥、querySelectorAll() 方法

与 Dcument 类型中的 querySelectorAll() 方法一样。

⑦、createElement() 方法

createElement() 方法，创建一个新元素。

接收一个参数：要创建元素的标签名，该标签名在html文档中不区分大小写。

返回一个创建好的元素。

var div=document.createElement("div");
div.className="box";
console.log(div);             // <div class="box"></div>

⑧、appendChild() 方法

appendChild() 方法，将一个节点添加到指定父节点列表末尾。另外，它还能将创建的文本节点添加到指定节点中（详见createTextNode 方法）。

接受一个参数：要插入的元素。

返回刚刚插入的元素。

var div=document.createElement("div");
div.className = "box";
var newDiv = document.body.appendChild(div);
console.log(newDiv);            // <div class="box"></div>

⑨、insertBefore() 方法

insertBefore() 方法，在参考节点之前插入一个节点作为一个指定父节点的子节点。

接收两个参数：要插入的节点和参照节点。

返回被插入的节点。

// html 中
<div><span id="child">hello world</span>
</div>/*** JavaScript 中**/
//创建一个span标签
var sp1 = document.createElement("span");
//获取id为child的span标签
var sp2 = document.getElementById("child");
console.log(sp2.parentNode.childNodes);            // NodeList(3) [text, span#child, text]// 将sp1插入在sp2前
var ele = sp2.parentNode.insertBefore(sp1, sp2);console.log(ele);                                  // <span></span>
console.log(sp2.parentNode.childNodes);            // NodeList(4) [text, span, span#child, text]

⑩、replaceChild() 方法

replaceChild() 方法，用指定的节点替换当前节点的一个子节点。

接受两个参数：要插入的节点和要被替换的节点。

返回替换掉的节点。

// html 中
<div><span id="child">hello world</span>
</div>/*** JavaScript 中**/
//创建一个span标签
var newSpan = document.createElement("span");
newSpan.id = "mySpan";
//创建文本
var newSpan_content = document.createTextNode("new Span元素的content");
//将文本加入newSpan中
newSpan.appendChild(newSpan_content);
//获取id为child的span标签
var oldSpan = document.getElementById("child");
var returnNode = oldSpan.parentNode.replaceChild(newSpan, oldSpan);console.log(returnNode);                 // <span id="child">hello world</span>

⑪、remove() 方法

remove() 方法，从 DOM 树中删除一个节点。

// html 中
<div id="parent"><span id="child">hello world</span>
</div>// JavaScript 中
var el = document.getElementById('child');
while (el) {el.remove();
}

⑫、removeChild() 方法

removeChild() 方法，从 DOM 中删除一个子节点,返回删除的节点。

接收一个参数：要移除的那个子节点。

返回被删除的节点。

// html 中
<div id="parent"><span id="child">hello world</span>
</div>// JavaScript 中
var el = document.getElementById('parent');
while (el.firstChild) {el.removeChild(el.firstChild);
}

4、Text 类型

text 类型表示文本节点，包含纯文本内容。

（1）、Text 类型的特性

nodeType的值为 3；
nodeName的值为 "#text"；
nodeValue的值为节点所包含的文本；
parentNode是一个 Element；
没有子节点。

（2）、Text 类型的属性

①、data 属性

可以通过 data 属性来访问 Text 类型中包含的文本，当然也可以通过 nodeValue 属性来访问。

②、length 属性

length 属性保存着节点中字符的数目。

注意：在计算文本长度时会把换行和制表符也计算在内。data 获取时里面会包含制表符。

③、previousElementSibling 属性

previousElementSibling 属性返回前一个兄弟元素节点，如果没有则返回 null。

④、nextElementSilbling 属性

nextElementSilbling 属性返回下个兄弟元素节点，如果没有则返回 null。

（3）、Text 类型的方法

①、appendData() 方法

appendData() 方法，将文本添加到节点末尾。

接收一个参数：要添加的内容。

// html 中
<div id="myDiv">hello</div>// JavaScript 中
var div = document.getElementById('myDiv');
div.firstChild.appendData("boy!");console.log(div.firstChild.data);              // hello boy!

②、 deleteData() 方法

deleteData() 方法，从指定位置开始删除指定个字符。

接收两个参数：开始删除的位置和删除的字符个数。

// html 中
<div id="myDiv">chair</div>// JavaScript 中
var div = document.getElementById('myDiv');
div.firstChild.deleteData(0, 2);console.log(div.firstChild.data);                 // air

③、insertData() 方法

insertData() 方法，在指定位置插入指定的内容。

接收两个参数：开始插入的位置和插入的文本。

// html 中
<div id="myDiv">lean</div>// JavaScript 中
var div = document.getElementById('myDiv');
div.firstChild.insertData(3, "r");console.log(div.firstChild.data);                  // learn

④、replaceData() 方法

replaceData() 方法，用指定的文本内容，从指定位置开始，替换指定位数的文本内容。

接收三个参数：指定开始位置、替换的字符数和新的文本内容。

// html 中
<div id="myDiv">take</div>// JavaScript 中
var div = document.getElementById('myDiv');
div.firstChild.replaceData(0, 1, "c");console.log(div.firstChild.data);         // cake

⑤、substringData() 方法

substringData() 方法，从指定位置开始，截取指定位数的文本内容。

接收两个参数：开始截取的位置和截取的字符数。

返回截取到的字符串。

// html 中
<div id="myDiv">take</div>// JavaScript 中
var div = document.getElementById('myDiv');
var res = div.firstChild.substringData(1, 2);console.log(res);                 // el

⑥、splitText() 方法

splitText() 方法，从指定位置分割文本。

接收一个参数：分割文本的位置。

返回分割位置之后的部分。

// html 中
<div id="myDiv">hello</div>// JavaScript 中
var div = document.getElementById('myDiv');
var res = div.firstChild.splitText(3);console.log(div.firstChild.data);                       // hel
console.log(res.data);                                  // lo

⑦、createTextNode() 方法

createTextNode() 方法，创建新的文本节点。

接受一个参数：要插入节点的文本。

返回创建好的文本。

// html中
<div id="myDiv"></div>// JavaScript 中
var div = document.getElementById("myDiv");
var div_content = document.createTextNode("hello world");var ele = div.appendChild(div_content);console.log(ele);               // "hello world"
console.log(div);               // <div id="myDiv">hello world</div>

5、Comment 类型（了解）

Comment 类型表示注释节点。

Comment 类型节点具有以下特征：

nodeType 的值为 8；
nodeName 的值为“#comment”；
nodeValue 的值为注释的内容；
parentNodes 的值为 Document 或 Element；
没有子节点。

Comment 类型与 Text 类型继承自相同的基类，因此 Text 类型拥有除 splitText(）方法之外的所有字符串操作方法。

6、CDATASection 类型（了解）

CDTASection 类型是基于 XML 的文档，表示的是 CDATA 区域。

CDATASection 类型的特征：

nodeType 的值为 4；
nodeName 的值为“#cdata-section”；
nodeValue 的值为 CDATA 区域中的内容；
parentNode 的值为 Dcument 或 Element；
没有子节点。

与 Comment 类型类似，CDATASection 类型继承自 Text 类型，因此拥有除 splitText(）方法之外的所有字符串操作方法。

7、DocumentType 类型（了解）

DocumentType 类型在 Web 浏览器中不常用。DocumentType 类型包含着与文档 doctype 有关的所有信息。

DocumentType 类型具有以下特征：

nodeType 的值为 10；
nodeName 的值为 doctype 的名称；
nodeValue 的值为 null；
parentNode 的值为 Dcument；
没有子节点。

8、DocumentFragment 类型（了解）

DocumentFragment 类型表示文档片段（一种轻量级的文档），只有 DocumentFragment 类型在文档中没有对应的标记。

DocumentFragment 类型的特征：

nodeType 的值为 11；
nodeName 的值为“#document-fragment”；
nodeValue 的值为 null；
parentNode 的值为 null；
子节点可以是 Element、ProcessingInstruction、Comment、Text、CDATASction 或 EntityReference。

9、Attr 类型（了解）

Attr 类型表示元素的特性。

在所有浏览器中，都可以访问 Attr类型的构造函数和原型。

特性节点具有以下特征：

nodeType 的值为 2；
nodeName 的值为特性的名称；
nodeValue 的值为特性的值；
parentNode 的值为 null；
子节点可以是 Text 或 EntityReference。

不建议直接访问特性节点。因为 getAttribute()、setAttribute() 和 removeAttribute() 方法远比操作特性节点更方便。

二、DOM1 级操作技术

1、动态脚本

动态脚本指的是：页面刚加载时不存在，但将来随 JavaScript 代码的执行而动态添加的脚本。

创建动态脚本有两种方式：一种是插入外部文件，另一种是直接插入 JavaScript 代码。

（1）、通过插入外部文件来添加动态脚本（该脚本会立即运行）

例如：

<script type="text/javascript" src="one.js"></script>

（2）、直接插入 JavaScript 代码来添加动态脚本

例如：

<script type="text/javascript">console.log("hello world");
</script>

2、动态样式

动态样式指的是页面刚加载时不存在，但是在页面加载完成后动态添加的样式。

创建动态样式有两种方式：一种是插入外部文件，另一种是直接插入 CSS 代码。

能够把 CSS 样式包含到 HTML 页面中的元素有两个：<link> 和 <style>。其中， <link> 元素用于包含来自外部的文件，而 <style> 元素用于指定嵌入的样式。

（1）、通过插入外部文件来实现动态样式

例如：

<link rel="stylesheet" type="text/css" href="style.css">

（2）、直接插入 CSS 代码来实现动态样式

例如：

<style>div {background: #ddd;}
</style>

3、操作表格

（1）、Table 对象的描述

cells[] 获取包含表格中所有单元格的数组。
rows[] 获取包含表格中所有行的数组。
tBodies[] 获取包含表格中所有tbody的数组。

（2）、Table 对象的属性

border 设置或获取表格边框。
caption 设置或获取表格标题。
cellPadding 设置或获取每个单元格边框与内容的宽度。
cellSpacing 设置或获取表格中单元格的间距。
frame 设置或获取表格具有哪些边框。
rules 设置或获取表格中的内部边框。
summary 设置或获取表格的描述。
tFoot 获取表格的tFoot对象。
tHead 获取表格的tHead对象。
width 设置或获取表格宽度。

（3）、Table 对象的方法

createCaption() 为表格创建一个空的标题元素。
createTFoot() 为表格创建一个空的tFoot元素。
createTHead() 为表格创建一个空的tHead元素。
deleteCaption() 删除表格的标题元素。
deleteRow() 删除指定的表格行。
deleteTFoot() 删除表格的tFoot元素。
deleteTHead() 删除表格的tHead元素。
insertRow() 向表格中插入新行。

4、使用 NodeList

DOM 中，NodeList、NamedNodeMap 和 HTMLCollection 对象都是“动态的”，实时更新的。

一般来说，应该尽可能少的访问 NodeList 对象，因为每次访问 NodeList 对象，都会运行一次基于文档的查询，所以，可以考虑将其从 NodeList 对象中取得的值缓存起来。

三、DOM1 级的扩展

1、DOM1 级的扩展属性

（1）、classList 属性——方便对 class 属性进行增删改查

classList 属性返回该元素包含的 class 属性，返回一个元素的类属性的实时 DOMTokenList 集合。

DOMTokenList 集合是一个新类型，与 NodeList 集合类似，可以使用方括号语法，有 length 属性。访问 NodeList 对象里的值时，可以使用方括号语法，也可以使用 childNodes 属性的 item() 方法。

DOMTokenList 集合定义了以下方法：

①、add() 方法

add() 方法，添加指定的类值（自动忽略已存在的值）。

接收一个参数：要添加的类值。

没有返回值。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;classes.add("w50");
console.log('-1', classes);    // DOMTokenList(3) ["myDiv", "color", "w50", value: "myDiv color w50"]

②、remove() 方法

remove() 方法，删除指定的类值。

接收一个参数：要删除的类值。

没有返回值。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;classes.remove("myDiv");
console.log('-2', classes);   // DOMTokenList ["color", value: "color"]

③、toggle() 方法

toggle() 方法，有两种用法：

toggle() 方法，只接收一个参数时，如果列表中已存在给定的值，则删除它，并返回 false；如果列表中没有给定的值，则添加它，并返回 true。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;var a = classes.toggle("color");
console.log(a);              // false
console.log(classes);        // DOMTokenList ["myDiv", value: "myDiv"]var b = classes.toggle("h100");
console.log(b);              // true
console.log(classes);        // DOMTokenList(2) ["myDiv", "h100", value: "myDiv h100"]

toggle() 方法，接收两个参数时，若第二个参数的执行结果为 true，则添加指定的类值，并返回 true，若执行结果为 false，则删除它，并返回 false。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;var a1 = classes.toggle("color", 2>1);
console.log(a1);                 // true
console.log(classes);            // DOMTokenList(2) ["myDiv", "color", value: "myDiv color"]var a2 = classes.toggle("color", 2<1);
console.log(a2);                 // false
console.log(classes);            // DOMTokenList ["myDiv", value: "myDiv"]var b1 = classes.toggle("h100", 2>1);
console.log(b1);                 // true
console.log(classes);            // DOMTokenList(2) ["myDiv", "h100", value: "myDiv h100"]var b2 = classes.toggle("h100", 2<1);
console.log(b2);                 // false
console.log(classes);            // DOMTokenList ["myDiv", value: "myDiv"]

④、contains() 方法

contains() 方法，检查元素的类 class 属性中是否存在指定的类值。若存在，则返回 true，若不存在，则返回 false。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;var a = classes.contains("myDiv");
console.log(a);               // truevar b = classes.contains("background");
console.log(b);               // false

⑤、replace() 方法

replace() 方法，用一个新类值替换已有的类值。替换成功，则返回 true，替换失败，则返回 false。

// html中
<div id="exp" class="myDiv color">hello</div>// JavaScript 中
var div =document.querySelector("#exp");
var classes = div.classList;var a = classes.replace("myDiv", "emm");
console.log(a);                   // true
console.log(classes);             // DOMTokenList(2) ["emm", "color", value: "emm color"]var b = classes.replace("www", "qqq");
console.log(b);                   // false
console.log(classes);             // DOMTokenList(2) ["emm", "color", value: "emm color"]

（2）、activeElement 属性——辅助管理 DOM 焦点

元素获得焦点的方式有三种：页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus() 方法。

activeElement 属性，会获取当前文档获得焦点的元素。文档加载期间，document.activeElement 的值为 null；文档加载完成时，document.activeElement 的值为 document.body。通过调用 focus() 方法设置焦点，document.activeElement 的值会随设置而变化，例如：

// html 中
<input id="inp" type="text">// JavaScript 中
var input = document.getElementById("inp");
input.focus();
console.log(document.activeElement);        // <input id="inp" type="text">

（3）、readyState 属性——文档状态

readyState 属性，监听文档的状态，它有两个状态：

loading——正在加载文档；
complete——文档加载完毕。

（4）、compatMode 属性——兼容模式

compatMode 属性，反应浏览器采用了哪种渲染模式。

标准模式下，document.compatMode 的值等于“CSS1Compat”；

混杂模式下，document.compatMode 的值等于“BackCompat”。

（5）、head 属性

head 属性与 body 属性类似，head 属性引用文档的 <head> 元素，body 属性引用文档的 <body> 元素。

引用文档的 <head> 元素，有一个兼容的方法：

var head = document.head || document.getElementsByTagName("head")[0];

（6）、charset 属性——字符集

charset 属性，表示文档中实际使用的字符集，也可以用来指定新字符集。

默认情况下，charset 属性的值为“UTF-16”，但可以通过<meta>元素、响应头部或直接设置 charset 属性修改这个值。

alert(document.charset);// "UTF-16"
document.charset = "UTF-8";

（7）、children 属性

children 属性是只读属性，对象类型为 HTMLCollection 类型。

children 属性与 childNodes 属性没有什么区别，在元素只包含元素节点时，这两个属性的值相同。所以想要了解 children 属性，直接看本文中的 childNodes 属性。

IE8 及更早版本的 children 属性中除了包含元素节点之外还包含注释节点，但 IE9 之后的版本则只返回元素节点。

（8）、innerHTML 属性和 outerHTML 属性——插入标记

innerHTML 属性和 outerHTML 属性用来插入标记。

在使用 innerHTML 属性和 outerHTML 属性前，最好手动删除要被替换元素的所有事件处理程序和 JavaScript 对象属性，否则会导致内存占用问题。

要尽量避免多次循环使用 innerHTML 属性和 outerHTML 属性，否则会带来性能的损失。

①、innerHTML 属性

在读模式下，innerText 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。

例如：

// html 中
<div id="content"><p>hello world</p>
</div>//JavaScript 中
var div = document.getElementById("content");
console.log(div.innerHTML);                   // <p>hello world</p>

执行效果如图（基于 Chrome 浏览器，下同）：

在写模式下，innerText 属性会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。

例如：

// html 中
<div id="content"><p>hello world</p>
</div>//JavaScript 中
var div = document.getElementById("content");
div.innerHTML = "Welcome to <b>\"China\"</b>";
console.log(div.innerHTML);                     // Welcome to <b>"China"</b>

执行效果如图：

②、outerHTML 属性（了解）

在读模式下，outerHTML 属性返回调用它的元素及所有子节点的 HTML 标签。

例如：

// html 中
<div id="content"><p>hello world</p>
</div>//JavaScript 中
var div = document.getElementById("content");
console.log(div.outerHTML);

上述代码中，<div> 元素的 innerHTML 属性会返回如下字符串：

"<div id="content"><p>hello world</p></div>"

执行效果如图：

在写模式下，outerHTML 属性会根据指定的 HTML 字符串创建新的 DOM 子树，然后调用这个 DOM 子树完全替换调用元素。

例如：

// html 中
<div id="content"><p>hello world</p>
</div>//JavaScript 中
var div = document.getElementById("content");
div.outerHTML = "Welcome to <b>\"China\"</b>";
console.log(div.outerHTML);

上述代码中，<div> 元素的 outerHTML 属性会返回如下字符串：

"<div id="content"><p>hello world</p></div>"

执行效果如图：

执行效果相当于如下代码：

// html 中
<div id="content"><p>hello world</p>
</div>//JavaScript 中
var div = document.getElementById("content");
var p = document.createElement("p");
p.appendChild(document.createTextNode("hello world"));
div.parentNode.replaceChild(p, div);

（9）、innerText 属性和 outerText 属性——插入文本

innerText 属性和 outerText 属性用来插入文本。

①、innerText 属性

在读模式下，innerText 属性会按照由浅入深的顺序，将子文档的所有文本拼接成一个字符串并将其返回。

例如：

// html 中
<div id="content"><div>hello boys.</div><div>hello girls!</div>
</div>// JavaScript 中
var div = document.getElementById("content");
console.log(div.innerText);

上述代码中，<div> 元素的 innerText 属性会返回如下字符串：

"hello boys.
hello girls!"

执行效果如图：

在写模式下，innerText 属性会删除元素的所有子节点，插入包含相应文本值的文本节点。

例如：

// html 中
<div id="content"><div>hello boys.</div><div>hello girls!</div>
</div>// JavaScript 中
var div = document.getElementById("content");
console.log(div.innerText);                    // hi, <b>"Lily"</b>

执行效果如图：

②、outerText 属性（了解）

在读模式下，outerText 属性与 innerText 属性完全一样。

例如：

// html 中
<div id="content"><div>hello boys.</div><div>hello girls!</div>
</div>// JavaScript 中
var div = document.getElementById("content");
console.log(div.outText);                         // undefined

执行效果如图：

在写模式下，outerText 属性与 innerText 属性完全不同了，outerText 属性不仅仅是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。

例如：

// html 中
<div id="content"><div>hello boys.</div><div>hello girls!</div>
</div>// JavaScript 中
var div = document.getElementById("content");
div.outerText = "hi, <b>\"Lily\"</b>";
console.log(div.outText);                         // undefined

执行效果如图：

执行效果相当于如下代码：

// html 中
<div id="content"><div>hello boys.</div><div>hello girls!</div>
</div>// JavaScript 中
var div = document.getElementById("content");
var text = document.createTextNode("hi, <b>\"Lily\"</b>");
div.parentNode.replaceChild(text, div);

（10）、自定义数据属性

HTML5 规定可以为元素添加非标准的属性，即自定义属性，但必须要添加前缀：“data-”。

添加了自定义属性后，可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的值是 DOMStringMap 的一个实例。

例如：

// html 中
<div id="myDiv" data-name="Mack" data-age="18"></div>// JavaScript 中
var div = document.getElementById("myDiv");// 获取自定义属性的值
var myName = div.dataset.name;                           // "Mack"
var myAge = div.dataset.age;                             // "18"// 设置自定义属性的值
div.dataset.name = "Lily";                               // "Lily"

2、DOM1 级的扩展方法

（1）、getElementsByClassName() 方法——获取元素

getElementsByClassName() 方法接收一个参数——一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。

// html中
<div class="myDiv"></div>// JavaScript 中
var div = document.getElementsByClassName("myDiv");
console.log(div);                        // HTMLCollection [div.myDiv]

getElementsByClassName() 和 getElementById() 方法返回的值并不相同。

（2）、hasFocus() 方法——获取焦点

hasFocus() 方法，用于查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点。通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。

// html 中
<input id="inp" type="text">// JavaScript 中
var input = document.getElementById("inp");
input.focus();
console.log(document.hasFocus());        // true

（3）、insertAdjacentHTML() 方法——插入标记

insertAdjacentHTML() 方法，用来插入标记。在使用insertAdjacentHTML() 方法前，最好手动删除要被替换元素的所有事件处理程序和 JavaScript 对象属性，否则会导致内存占用问题。

insertAdjacentHTML() 方法，接收两个参数：插入的位置和要插入的 HTML 文本。第一个参数必须是下列值之一：

①、“beforebegin”——在当前元素之前插入一个紧邻的同辈元素；

②、“afterbegin”——在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；

③、“beforeend”——在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；

④、“afterend”——在当前元素之后插入一个紧邻的同辈元素。

（4）、scrollIntoView() 方法——浏览器窗口滚动

scrollIntoView() 方法，可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

若给 scrollIntoView() 方法传入一个 true 作为参数，或者不传任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能的对齐。

若给 scrollIntoView() 方法传入一个 false 作为参数，调用元素会尽可能全部出现在视口中，那么窗口滚动之后会让调用元素的底部与视口底部尽可能的对齐，不过顶部不一定平齐。

让某个元素可见时，就可以用 scrollIntoView() 方法。例如：

document.forms[0].scrollIntoView();

拓展：滚动

HTML5 将scrollIntoView() 方法纳入规范后，仍然有其他几个方法可以在不同的浏览器中使用。下面列出的几个方法都是对 HTMLElement 类型的扩展，因此在所有元素中均可以调用：

scrollIntoViewIfNeeded(alignCenter)：只在当前元素不可见的情况下才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，那什么也不做。如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部（垂直方向）。Safari 和 Chrome 实现了这个方法。
scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari 和 Chrome 实现了这个方法。
scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。Safari 和 Chrome 实现了这个方法。

scrollIntoView() 和 scrollIntoViewIfNeeded() 方法的作用对象是元素的容器。

scrollByLines() 和 scrollByPages() 方法的作用对象是元素自身。

（5）、contains() 方法——检测某个节点是不是另一个节点的后代

contains() 方法，用来检测某个节点是不是另一个节点的后代。

调用 contains() 方法的必须是祖先节点，也就是搜索的开始节点，contains() 方法接受一个参数，即要检测的后代节点。如果检测的节点时后代节点，则返回 true；否则，返回 false。

// html 中
<body><div id="content"><p>hello world</p></div>
</body>//JavaScript 中
var body = document.body;
var div = document.getElementById("content");
var p = document.getElementsByTagName("p")[0];console.log(body.contains(div));                // true
console.log(p.contains(div));                   // false

3、文档模式

IE8 引入了一个概念叫 “文档模式”。

页面的文档模式决定了可以使用什么功能。设置文档模式，可以兼容 IE 版本。

到了 IE9，总共有以下 4 种文档模式：

IE5：以混杂模式渲染页面。IE8 及更高版本中的新功能无法使用。
IE7：以 IE7 标准模式渲染页面。不过 IE8 中的新功能无法使用。
IE8：以 IE8 标准模式渲染页面。不过 IE9 中的新功能无法使用。
IE9：以 IE9 标准模式渲染页面。

如何强制浏览器以某种模式渲染页面呢？

可以使用 HTTP 头部信息 “X-UA-Compatible”，或通过等价的 <meta> 标签来设置，例如：

<meta http-equiv="X-UA-Compatible" content="IEVersion">

这里 IE 的版本（IEVersion）有以下一些不同的值，而且这些值并不一定与上述 4 种文档模式对应：

Edge：始终以最新的文档模式来渲染页面，忽略文档声明。对于 IE8，始终以 IE8 标准模式渲染页面。对于 IE9，始终以 IE9 标准模式渲染页面。
EmulateIE9：如果有文档类型声明，则以 IE9 标准模式渲染页面，否则将文档模式设置为 IE5。
EmulateIE8：如果有文档类型声明，则以 IE8 标准模式渲染页面，否则将文档模式设置为 IE5。
EmulateIE7：如果有文档类型声明，则以 IE7 标准模式渲染页面，否则将文档模式设置为 IE5。
9：强制以 IE9 标准模式渲染页面，忽略文档类型声明。
8：强制以 IE8 标准模式渲染页面，忽略文档类型声明。
7：强制以 IE7 标准模式渲染页面，忽略文档类型声明。
5：强制将文档模式设置为 IE5，忽略文档声明。

比如，要想让文档模式像在 IE7 中一样，可以使用下面这行代码：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
或
<meta http-equiv="X-UA-Compatible" content="IE=7">

四、DOM2

DOM2 级在原来 DOM1 的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块。
DOM2 通过对象接口增加了对 CSS 的支持。
DOM2 开始支持 XML 命名空间。

1、DOM2 中 DOM 的变化

（1）、节点变化

①、Node 类型的变化

-->、针对 XML命名空间的变化

新增 3 个属性：
- localName：不带命名空间前缀的节点名称。
- namespaceURI：命名空间 URI 或者（在未指定的情况下）null。
- prefix：命名空间前缀或者（在未指定的情况下）null。

当前节点使用了命名空间前缀时，其 nodeName 等于" prefix + ‘ : ’ + localName "。例如：

<s:svg></s:svg>

-->、与命名空间无关的变化

新增 isSupported() 方法：

isSupported() 方法用于判断当前节点是否支持某个特性。

isSupported() 方法接受两个参数：特性名和特性版本号。

如果浏览器实现了相应的特性，并且能够基于给定的节点执行该特性，isSupported() 方法就返回 true。

IE8 及更早IE版本不支持该方法，所以建议开发者最好还是使用功能检测。

if(document.body.isSupported("HTML", "2.0")){// 执行只有“DOM2 级 HTML”才支持的操作
}

②、Document 类型的变化

-->、针对 XML命名空间的变化

新增了三个方法：
- createElementNS(namespaceURI, tagName)：用给定的 tagName 创建一个属于命名空间 namespaceURI 的新元素。
- createAttributeNS(namespaceURI, attributeName)：用给定的 attributeName 创建一个属于命名空间 namespaceURI 的新元素。
- getElementsByTagNameNS(namespaceURI, tageName)：返回属于命名空间 namespaceURI 的 tageName 元素的 NodeList。

只有在文档中存在两个或多个命名空间时，以上这些与命名空间相关的方法才是必须的。

// 创建一个新的 SVG 元素
var svg = document.createElementNS("http://www.somewhere.org/2000/svg", "svg");

// 创建一个属于某个命名空间的新特性
var attr = document.createAttributeNS("http://www.somewhere.come", "random");

// 取得所有 XHTML 元素
var elems = document.getElementsByTagNameNS("http://www.somewhere.org/1999/xhtml", "*");

-->、与命名空间无关的变化

新增了 1 个属性：
- defaultView：保存着一个指针，指向拥有给定文档的窗口（或框架）。

IE 浏览器不支持 defaultView 属性。不过，IE 浏览器提供了一个等价的属性 parentWindow，那么，兼容版的“获取文档的归属窗口”如下：

var parentView = document.defaultView || document.parentWindow;

新增了 4 个方法：
- importNode() 方法
- createDocumentType() 方法
- createDocument() 方法
- createHTMLDocument() 方法

importNode() 方法：

importNode() 方法用于从一个文档中提取一个节点，然后将这个节点添加到另一个文档中。

importNode() 方法与 Element 的 cloneNode() 方法类似，接受两个参数：要复制的节点和表示是否复制节点的布尔值。

importNode() 方法返回原来节点的副本，这个新节点的所有权归当前文档所有。

importNode() 方法在 HTML 文档中用得不多，在 XML 文档中用的比较多。

createDocumentType() 方法：

createDocumentType() 方法只在创建新文档时有用，用于创建一个新的 DocumentType 节点。

createDocumentType() 方法接受三个参数：文档类型名称、publicId 和 systemId。

createDocumentType() 方法返回创建的 DocumentType 节点。

createDocument() 方法：

createDocument() 方法只在创建新文档时有用，用来创建一个空的新文档。

createDocument() 方法接受三个参数：namespaceURI、文档元素的标签名和新文档的文档类型。

createDocument() 方法返回一个空的新文档。

创建一个空的新 XML 文档，可以使用以下代码：

var doc = document.implementation.createDocument("", "root", null);

创建一个 XHTML 文档，可以使用以下代码：

var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD XHTML 1.0 Strict//EN","http://www.w3.org/TR/xhtml1/DTD/xhtml1--strict.dtd"
);
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml","html",doctype
);

createHTMLDocument() 方法：

createHTMLDocument() 方法用来创建一个完整的 HTML 文档，包括 <html>、<head>、<title> 和 <body> 元素。

createHTMLDocument() 方法接受一个参数：新创建文档的标题。

createHTMLDocument() 方法返回新创建的 HTML 文档，该文档是 HTMLDocument 类型的实例，具有该类型的所有特性。

var htmldoc = document.implementation.createHTMLDocument("我的新 html 文档");

③、DocumentType 类型的变

-->、与命名空间无关的变化

新增了 3 个属性：
- publicId：用于访问一部分文档类型声明中的信息（详见案例），在 DOM1 中无法访问到该信息。
- systemId：用于访问一部分文档类型声明中的信息（详见案例），在 DOM1 中无法访问到该信息。
- internalSubset：用于访问包含在文档类型声明中的额外定义。

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"
[<!ELEMENT name (#PCDATA)>]
>console.log(document.doctype.publicId);          // "-//W3C//DTD HTML 4.01//EN"
console.log(document.doctype.systemId);          // "http://www.w3.org/TR/html4/strict.dtd"
console.log(document.doctype.internalSubset);    // [<!ELEMENT name (#PCDATA)>]

实际上，很少需要在网页中访问此类信息。

④、Element 类型的变化

-->、针对 XML命名空间的变化

新增了 7 个方法：
- getAttributeNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的特性。
- getAttributeNodeNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的特性节点。
- getElementsByTagNameNS(namespaceURI, tagName)：取得属于命名空间 namespaceURI 且名为 tagName 元素的 NodeList。
- hasAttributeNS(namespaceURI, localName)：确定当前元素是否有一个名为 localName 的特性，而且特性的命名空间是不是 namespaceURI。
- removeAttributeNS(namespaceURI, localName)：删除属于命名空间 namespaceURI 且名为 localName 的特性。
- setAttributeNS(namespaceURI, qualifiedName, value)：设置属于命名空间 namespaceURI 且名为 qualifiedName 的特性的值为 value。
- setAttributeNodeNS(attNode)：设置属于命名空间 namespaceURI 的特性节点。

以上方法，除了第一个参（命名空间 URI）外，其余与 DOM1 中相关方法的作用相同。

⑤、NamedNodeMap 类型的变化

-->、针对 XML命名空间的变化

新增了 3 个方法：
- getNamedItemNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的项。
- removeNamedItemNS(namespaceURI, localName)：删除属于命名空间 namespaceURI 且名为 localName 的项。
- setNamedItemNS(node)：添加 node，这个节点已经事先指定了命名空间信息。

由于一般都是通过元素访问特性，所以以上方法很少使用。

（2）、框架的变化

框架和内嵌框架分别用 HTMLFrameElement 和 HTMLIFrameElement 表示，他们在 DOM2 中都新增了一个新属性：contentDocument。

contentDocument 属性包含一个指针，指向表示框架内容的文档对象。这样就不用像 DOM1 中那样借助 frames 集合来间接获取该对象了。
contentDocument 属性是 Document 类型的实例，具有该类型的一切特性。
IE8 及其以下版本中 contentDocument 属性是无效的，但支持一个叫 contentWindow 的属性，该属性返回框架的 window 对象，而这个 window 对象又有一个 document 属性。

获取一个框架内的文档对象的兼容写法：

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

2、样式

在 HTML中定义样式的方式有 3 种：通过<link/>元素包含外部样式表文件、使用<style/>元素定义嵌入式样式，以及使用 style 属性定义针对特定元素的样式。

（1）、访问元素的样式

①、style 属性的规范

style 属性中指定的任何 CSS 属性都将表现为这个 style 对象的相应属性。对于使用短划线分隔的 CSS 属性名（例如 background-image），必须将其转换成驼峰大小写形式（backgroundImage），才能通过 JavaScript 来访问。

由于 float 是 JavaScript 中的保留字，所以 DOM2?规定样式对象上的属性名为?cssFloat，IE?浏览器支持的是?styleFloat。

style 属性是只读的，它的子属性是可写可读的，例如：

// html 中
<div id="myDiv" style="width:10px;"></div>// JavaScript 中
var myDiv = document.getElementById("myDiv"); // 读取 style 属性
console.log(myDiv.style.width);            // 10px// 设置 style 属性
myDiv.style.backgroundColor = "red"; 
myDiv.style.width = "100px"; 
myDiv.style.height = "200px"; 
myDiv.style.border = "1px solid black";

②、style 对象的一些属性和方法

DOM2 规范还为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style 特性值的同时，也可以修改样式。下面列出了这些属性和方法。

cssText：能够读取 style 特性中的 CSS 代码，也可以写入修改 style 特性中的 CSS 代码。

var myDiv = document.createElement('div');// 设置多个样式
myDiv.style.cssText = `position:absolute; right:0px; top:20px; color:#fff;`;
// 或者
myDiv.style.position = 'absolute';
myDiv.style.right = 0 + 'px';
myDiv.style.top = 20 + 'px';
myDiv.style.color = '#fff';// 如果是在原有样式的基础上添加或修改样式，可以这样写
myDiv.style.cssText += `position:absolute; right:0px; top:20px; color:#fff;`;

length：应用给元素的 CSS 属性的数量。
parentRule：表示 CSS 信息的 CSSRule 对象。本文后面将讨论 CSSRule 类型。
getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回 "important"；否则，返回空字符串。
getPropertyValue(propertyName)：返回给定属性的字符串值。
item(index)：返回给定位置的 CSS属性的名称。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。

③、计算样式——getComputedStyle() 方法

无论在那个浏览器中，计算样式都是只读的。

虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。为了解决这个问题，“DOM2 级样式”提供了 document.defaultView.getComputedStyle() 方法，现在也可以直接这样调用：window.getComputedStyle() 方法。

getComputedStyle() 方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"，如果不需要伪元素信息，第二个参数可以是 null）。

getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象（与 style 属性的类型相同），其中包含当前元素的所有计算的样式。

getComputedStyle() 方法的运用：

// 样式
<style type="text/css">#myDiv{background-color: blue; width: 100px;height: 200px;}
</style>// html 和 JavaScript 中
<div id="myDiv" style="background-color: red; border: 1px solid black"></div>
<script>var myDiv = document.getElementById("myDiv");var computedStyle = document.defaultView.getComputedStyle(myDiv, null);console.log(computedStyle.backgroundColor);          // rgb(255, 0, 0)——红色console.log(computedStyle.width);                    // 100pxconsole.log(computedStyle.height);                   // 200pxconsole.log(computedStyle.border);                   // 1px solid rgb(0, 0, 0)
</script>

由上述代码可知，style 属性中的样式会覆盖样式表（即<style>标签）中的样式

不过，由于不同浏览器解析属性的方式不同，所以显示的结果不一定完全一样。另外，IE8 及其以下版本不支持 getComputedStyle() 方法，不过，在 IE 中每个具有 style 属性的元素都有一个 currentStyle 属性，这个属性与 getComputedStyle() 方法的返回值一样都是 CSSStyleDeclaration 对象的实例，也能获取绝大多数样式，例如：

/**IE 浏览器中**/// 样式
<style type="text/css">#myDiv{background-color: blue; width: 100px;height: 200px;}
</style>// html 和 JavaScript 中
<div id="myDiv" style="background-color: red; border: 1px solid black"></div>
<script>var myDiv = document.getElementById("myDiv");var currentStyle = myDiv.currentStyle;console.log(currentStyle.backgroundColor);          // redconsole.log(currentStyle.width);                    // 100pxconsole.log(currentStyle.height);                   // 200pxconsole.log(currentStyle.border);                   // 
</script>

所以，获取全部样式的兼容写法如下：

//兼容IE8 及其以下版本
var eleAllStyle;
if(div.currentStyle){eleAllStyle = div.currentStyle;
}else{eleAllStyle = window.getComputedStyle(div, null);
}

（2）、操作样式列表

①、样式表——CSSStyleSheet 对象

CSSStyleSheet 类型表示的是样式表。包括 <link> 元素包含的样式表和在 <style> 元素中定义的样式表。其中，<link> 元素和 <style> 元素分别由 HTMLLinkElement 类型和 HTMLStyleElment 类型表示的。HTMLLinkElement 类型和 HTMLStyleElment 类型均允许修改 HTML 特性，但是 CSSStyleSheet 对象不允许修改 HTML 特性，它是一套只读的借口（只有一个 disabled 属性例外）。

CSSStyleSheet 类型继承自 StyleSheet，StyleSheet 可以作为一个基础接口来定义非 CSS 样式表。从 StyleSheet 继承来的属性如下：

disabled：样式是否被禁用，true 值可以禁用样式表。可读可写。
href：若样式表示通过 <link> 引入的，则值是样式表的 URL，否则值是 null。
media：当前样式表支持的所有媒体类型的集合。该集合是一个类数组——有 length 属性，可以通过 item() 方法或者方括号语法取的其中的项；如果集合是空列表，表示样式适用于所有媒体；在 IE 中，media 与众不同的是它仅是一个反映 <link> 和 <style> 元素 media 特性值的字符串。
ownerNode：指向拥有当前样式表的节点的指针。如果样式表是通过 @import 导入的，则这个属性值为 null。IE 不支持。
parentStyleSheet：如果样式表是通过 @import 导入的，这个属性指向导入它样式表的指针。
title：ownerNode 中 title 属性的值。
type：表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是 "type/css"。

CSSStyleSheet 类型除了继承了 StyleSheet 的上述所列属性外，它还有自己的属性和方法：

-->、属性

cssRules：样式表中包含的样式规则的集合。IE 不支持，但有一个类似的 rules 属性。
ownerRule：如果样式表是通过 @import 导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为 null。IE 不支持。

-->、方法

deleteRule(index) 方法：删除 CSSRules 集合中指定位置的规则。IE 不支持，但支持一个类似的 removeRule() 方法。
insertRule(rule, index) 方法：向 CSSRules 集合中指定位置添加 rule 字符串。IE 不支持，但支持一个类似的 addRule() 方法。

②、操作样式表

获取样式表的方法有两种：

法一：通过 样式表的集合——styleSheets 对象 来操作

document.styleSheets 集合用来访问文档的所有样式表。

styleSheets 集合是一个类数组——它的 length 属性表示文档中样式表的数量，可以通过 item() 方法或方括号语法可以访问每一个样式表。

不同的浏览器 styleSheets 返回的样式表也不相同。

// 获取文档使用的每一个样式表的 href 属性
var sheet = null;
for(var i = 0; len = document.styleSheets.length; i < len; i++){sheet = document.styleSheets[i];console.log(sheet.href);
}

法二、通过 sheet 属性 操作

sheet 属性包含一个 CSSStyleSheet（样式表）对象。

IE 不支持 sheet 属性，但支持一个类似的 styleSheet 属性。

用 sheet 获取样式表的兼容写法如下：

function getStyleSheet(element){return element.sheet || element.styleSheet;
}
// 取得第一个 <link> 元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);

③、CSS规则（了解）

-->、样式表的规则

CSSRule 对象包含样式表中的每一条规则。它是一个供其他类型继承的基类型。

CSSStyleRule 类型继承自 CSSRule 基类，表示样式信息。 CSSStyleRule 对象的属性如下：

cssText：返回整条规则对应的文本。由于浏览器处理方式不同，返回的文本可以不一样。IE 不支持。
parentRule：如果当前的规则是通过 @import 导入的，这个属性引用的就是导入的规则，否则，这个值为 null。IE 不支持。
parentStyleSheet：当前规则所属的样式表。IE 不支持。
selectorText：返回当前规则的选择符文本。由于浏览器处理方式不同，返回的文本可以不一样。在大多数浏览器中是只读的，Opera 可以修改。
style：一个 CSSStyleDeclaration 对象。可通过 style 来设置和取得规则中特定的样式值。
type：一个常量，表示规则类型。对于样式规则，这个值是 1。IE 不支持。

cssText 属性和 style.cssText 属性类似，但并不相同，cssText 属性包含选择符文本和花括号，是只读的；style.cssText 属性只包含样式信息，是可以被重写的。

-->、添加规则——insertRule() 方法

insertRule() 方法用来向现有样式表中添加新规则。

insertRule() 方法接受两个参数：规则文本和表示在哪里插入规则的索引。

IE 浏览器不支持 insertRule() 方法，但支持一个类似的 addRule() 方法，addRule() 方法可以接受三个参数：选择符、css 样式信息和（可选）插入位置。

向样式表中添加规则的兼容写法如下：

function insertRule(sheet, selectorText, cssText, position){if(sheet.insertRule){sheet.insertRule(selectorText + "{" + cssText + "}", position);} else if (sheet.addRule){sheet.addRule(selectorText, cssText, position);}
}insertRule(document.styleSheets[0], "body", "background-color: silver", 0);

我们可以这样添加规则，但是若要添加很多规则，就会变得非常繁琐，此时，推荐采用动态加载样式表。

-->、删除规则——deleteRule() 方法

deleteRule() 方法从样式表中删除规则。

deleteRule() 方法接受一个参数：要删除的规则的位置。

IE 浏览器不支持 deleteRule() 方法，但支持一个类似的 removeRule() 方法，removeRule() 方法接受一个参数：要删除的规则的位置。

从样式表中删除规则的兼容写法如下：

function deleteRule(sheet, index){if(sheet.deleteRule){sheet.deleteRule(index);} else if (sheet.removeRule){sheet.removeRule(index);}
}deleteRule(document.styleSheets[0], 0);

删除规则不是实际开发中常见的做法，考虑到删除规则可能会影响 css 层叠的效果，当慎用之。

（3）、元素大小

均在“标准盒模型下”进行的研究。

①、偏移量

偏移量包含元素在屏幕上占用的所有可见的空间。

offsetLeft / offsetRight / offsetHeight / offsetWidth

运用举例：

// 样式
<style type="text/css">*{margin: 0;padding: 0;}#myDiv{width: 100px;height: 200px;border: 10px solid black;background-color: rgb(94, 181, 252); }
</style>// html
<div id="myDiv"></div>// JavaScript
var myDiv = document.getElementById("myDiv");
var offsetL = myDiv.offsetLeft;
var offsetT = myDiv.offsetTop;
var offsetW = myDiv.offsetWidth;
var offsetH = myDiv.offsetHeight;
console.log([offsetL,offsetT,offsetW,offsetH]);            // [0, 0, 120, 220]

②、客户区大小

客户区大小指的是元素内容及其内边距所占的空间大小。

clientLeft / clientReight / clientWidth / clientHeight

运用举例：

// 样式
<style type="text/css">*{margin: 0;padding: 0;}#myDiv{width: 100px;height: 200px;border: 10px solid black;background-color: rgb(94, 181, 252); }
</style>// html
<div id="myDiv"></div>// JavaScript
var myDiv = document.getElementById("myDiv");
var clientL = myDiv.clientLeft;
var clientT = myDiv.clientTop;
var clientW = myDiv.clientWidth;
var clientH = myDiv.clientHeight;
console.log([clientL,clientT,clientW,clientH]);            // [10, 10, 100, 200]

③、滚动大小

滚动大小指的是包含滚动内容的元素的大小。

scrollLeft / scrollTop / scrollHeight / scrollWidth

3、遍历

DOM2 中定义了 NodeIterator 和 TreeWalker 类型能够基于给定的起点对 DOM 树进行深度优先的遍历。

任何节点都可以作为便利的根节点。以 document 为根节点的遍历则可以访问到文档的全部节点。

IE 浏览器不支持所有 DOM 遍历。

检测浏览器是否支持 DOM2 遍历：

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

（1）、NodeIterator 类型遍历

①、创建遍历器——createNodeIterator() 方法

用 document.createNodeIterator() 方法创建 NodeIterator 的实例。

createNodeIterator() 方法接受 4 个参数：

root：作为搜索起点的节点。
whatToShow：要访问的节点类型的位掩码或数值。
filter：指定一个自定义的 NodeFilter 对象，或者一个功能类似节点过滤器的函数。什么都不指定，filter 的值为 null。
entityReferenceExpansion：布尔值，表示是否要扩展实体引用。

-->、whatToShow 参数

whatToShow 参数是一个位掩码，通过应用一个或多个过滤器来确定要访问哪些节点。其常量值如下：

常量	数值	描述
NodeFilter.SHOW_ALL	-1	显示所有节点。
NodeFilter.SHOW_ATTRIBUTE	2	显示属性 attr 节点。
NodeFilter.SHOW_CDATA_SECTION	8	显示 CDATASction 节点。
NodeFilter.SHOW_COMMENT	128	显示Comment 节点
NodeFilter.SHOW_DOCUMENT	256	显示Document 节点。
NodeFilter.SHOW_DOCUMENT_FRAGMENT	1024	显示DocumentFragment 节点。
NodeFilter.SHOW_DOCUMENT_TYPE	512	显示DocumentType 节点。
NodeFilter.SHOW_ELEMENT	1	显示Element 节点。
NodeFilter.SHOW_ENTITY	32	显示Entity 节点。
NodeFilter.SHOW_ENTITY_REFERENCE	16	显示EntityReference 节点。
NodeFilter.SHOW_NOTATION	2048	显示Notation节点。
NodeFilter.SHOW_PROCESSING_INSTRUCTION	64	显示ProcessingInstruction 节点。
NodeFilter.SHOW_TEXT	4	显示Text 节点。

-->、filter 参数

通过 filter 参数可以指定自定义的 NodeFilter 对象，或者指定一个功能类似节点过滤器的函数。如果什么都不指定，filter 的值为 null。

NodeFilter 对象内只有一个固定的 acceptNode() 方法，如果要访问给定的节点，则令该方法返回 NodeFilter.FILTER_ACCEPT，如果不要访问给定的节点，则令该方法返回 NodeFilter.FILTER_SKIP（跳过指定节点）。

-->、如何创建一个只显示 <p> 元素的节点迭代器？

// 自定义一个 NodeFilter 对象
var filter = {acceptNode: function(node){return node.tageName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;}
};
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);// 或者封装一个节点过滤器函数
var filter = function(node){return node.tageName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);

②、NodeIterator 类型操作遍历的系列方法

-->、向前进一步——nextNode() 方法

当遍历到 DOM 树的最后一个节点时，再调用 nextNode() 方法会返回 null。

-->、向后退一步——previousNode() 方法

当遍历到 DOM 树的最后一个节点时，且 previousNode() 方法返回根节点后，再调用 previousNode() 方法会返回 null。

-->、NodeIterator 类型遍历案例

<div id="myDiv"><p><b>Hello</b> world.</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>
</div>

遍历上面代码 <div> 元素中的所有 <li> 元素：

var div = document.getElementById("myDiv");
// 创建过滤器
var filter = function(node){return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NoderFilter.FILTER_SKIP;
}
// 创建 NodeIterator 类型遍历器
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
var node = iterator.nextNode();
while(node != null){console.log(node.tagName);node = iterator.nextNode();
}// 遍历结果：LI LI LI

（2）、TreeWalker 类型遍历

①、创建遍历器——createTreeWalker() 方法

用 document.createTreeWalker() 方法创建 TreeWalker 的实例。

createTreeWalker() 方法接受 4 个参数，与 createNodeIterator() 方法相同：根节点、节点类型、过滤器和一个表示是否扩展实体引用的布尔值。

-->、filter 参数

createTreeWalker() 方法的 filter 参数与 createNodeIterator() 方法的 filter 参数不尽相同，在 NodeFilter.FILTER_ACCEPT和 NodeFilter.FILTER_SKIP 的基础上增加了 NodeFilter.FILTER_REJECT。FILTER_SKIP 是跳过指定节点继续前进到下一个节点（类似于 continue 关键字），FILTER_REJECT 是跳过指定节点和整个子树（类似于 return 关键字）。

-->、如何创建一个只显示 <p> 元素的节点迭代器？

// 自定义一个 NodeFilter 对象
var filter = {acceptNode: function(node){return node.tageName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;}
};
var walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter, false);// 或者封装一个节点过滤器函数
var filter = function(node){return node.tageName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
};
var walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, filter, false);

②、TreeWalker 类型操作遍历的系列方法

TreeWalker 类型除了包含 NodeIterator 类型的 nextNode() 方法和 previousNode() 方法外，还提供了以下方法：

parentNode() 方法：遍历到当前节点的父节点。
firstChild() 方法：遍历到当前节点的第一个子节点。
lastChild() 方法：遍历到当前节点的最后一个子节点。
nextSibling() 方法：遍历到当前节点的下一个同辈节点。
previousSibling() 方法：遍历到当前节点的上一个同辈节点。

TreeWalker 类型真正强大的地方在于能够在 DOM 树种沿任何方向移动，即使不定义过滤器也可以取得所有的 <li> 元素。

<div id="myDiv"><p><b>Hello</b> world.</p><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>
</div>

遍历上面代码 <div> 元素中的所有 <li> 元素：

var div = document.getElementById("myDiv");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
walker.firstChild();                    // 转到 <p>
walker.nextSibling();                   // 转到 <ul>
var node = walker.firstChild();         // 转到第一个 <li>
while (node != null) {console.log(node.tagName);node = walker.nextSibling();
}

③、TreeWalker 类型的 currentNode 属性

TreeWalker 类型有一个新属性 currentNode。currentNode 属性表示任何遍历方法在上一次遍历中返回的节点。

4、范围

为了让开发人员更方便的控制页面，DOM2 定义了“范围”借口，通过范围可以选择文档的一个区域，而不必考虑节点的界限（选择在后台完成，对用户是不可见的）。

IE 浏览器以专有方式实现了自己的范围特性。

（1）、DOM 中的范围

①、创建一个 DOM 的范围

DOM2 在 Document 类型中定义了 createRange() 方法，如果浏览器支持范围，那么就可以用 createRange() 方法来创建 DOM 范围了。

使用 hasFeature() 方法或者直接检测 createRange() 方法，来确定浏览器是否支持范围：

var supportsRange = document.implementation.hasFeature("Range", "2.0");
var alsoSupportsRange = (typeof document.createRange == "function");

创建一个范围：

var range = document.createRange();

与节点类似，新创建的范围直接与创建它的文档关联在一起，不能用于其他文档。创建了范围后，就能使用它在后台选择文档中的特定部分进行操作，从而实现对底层 DOM 树的更精细控制。

每个范围由一个 Range 类型的实例表示，这个实例拥有很多属性和方法：

startContainer：包含范围起点的节点。
startOffset：范围在 startContainer 中起点的偏移量。如果 startContainer 是文本节点、注释节点或 CDATA 节点，那么 startOffset 就是范围起点之前跳过的字符数量。否则，startOffset 就是范围中第一个子节点的索引。
endContainer：包含范围终点的节点。
endOffset：范围在 endContainer 中终点的偏移量（与 startOffset 遵循的规则相同）。
commonAncestorContainer：startContainer 和 endContainer 共同的祖先节点在文档树中位置最深的那个。

// html 中<p id="pp"><b>Hello</b> world.</p>// JavaScript 中
var range1 = document.createRange();range2 = document.createRange();pp = document.getElementById("pp");
range1.selectNode(pp);
range2.selectNodeContents(pp);console.log(range1.startContainer);   // <body>...</body>
console.log(range2.startContainer);   // <p id="pp">...</p>console.log(range1.endContainer);     // <body>...</body>
console.log(range2.endContainer);     // <p id="pp">...</p>console.log(range1.startOffset);      // 13
console.log(range2.startOffset);      // 0console.log(range1.endOffset);        // 14
console.log(range2.endOffset);        // 2

②、从 DOM 中选择范围

以下方法均用于修改 Range 对象的范围，无返回值。

selectNode(node) ：选择整个节点，包括其子节点。
selectNodeContents(node) ：只选择节点的子节点，不包括自身。
setStartBefore(refNode) ：将范围的起点设置在 refNode 之前，即 refNode 是范围选区中的起始节点。

setStartAfter(refNode) ：将范围的起点设置在 refNode 之后，即 refNode 的下一个同辈节点是范围选区中的起始节点。
setEndBefore(refNode) ：将范围的终点设置在 refNode 之前，即 refNode 是的前一个同辈节点范围选区中的终点节点。
setStartAfter(refNode) ：将范围的起点设置在 refNode 之后，即 refNode 是范围选区中的终点节点。

setStart(startContainer , startOffset) ：设置起点，当 startContainer 为文本、注释、CDATA节点时，可以选择其中的一部分作为起点节点，例如<p>hello</p>选择了"llo</p>"时，会自动将其补全，即起点节点为<p>llo</p>。可以看成快速设置指定属性。
setEnd(endContainer , endOffset) ：设置终点，与 setStart 方法类似。

③、操作 DOM 范围中的内容

-->、插入 DOM 范围中的内容

insertNode(node) ：向范围选区的开始处插入一个节点，对 DOM 产生相同影响。
cloneContents() ：复制 Range 对象的内容，返回 DOM 对象，可用于插入到文档的其他地方。
surroundContents(node) ：向范围选区环绕插入节点，对 DOM 产生相同影响。举个例，有<div>hello <b>world</b></div>的 HTML 文档片段，范围选择"llo <b>world</b>"，使用document.createElement('p')创建一个用于环绕的 node 节点对象，然后使用本方法，原 HTML 文档片段将变为<div>he<p>llo <b>world</b></p></div>。需要注意的是，在使用本方法前，对 "node" 对象插入其他节点是不会有效果的；但为 "node" 对象添加特性是有效果的。本方法执行时，后台会执行如下步骤：
- 提取出范围中的内容（类似执行 extractContent() ）；
- 将给定节点插入到文档中原来范围所在的位置上（忽略节点内容）；
- 将提取的文档片段的内容添加到给定节点中。

-->、删除 DOM 范围中的内容

deleteContents() ：从文档中删除该范围所包含的内容。由于范围选区在修改底层 DOM 结构时能够保证格式良好，所以即使内容被删除，DOM 结构依然是良好的。若范围包含部分的文本、注释、CDATA节点，则剩下的节点会被"包裹"成完成的节点，即<p>hello</p>被删除了"llo</p>"，则剩下的节点会变成<p>he</p>，还是完整的节点。
extractContents() ：与 deleteContents() 类似，但返回被删除的范围，即剪切该范围，用于插入到文档的其他地方。

④、折叠 DOM 范围

collapse(isStart) ：将范围折叠，isStart 表示是否折叠到起点。不会对 DOM 产生影响，属于一个没啥用的方法。折叠后的范围，起点和终点处于同一个位置。与此有关系的一个 Range 对象的属性：
- collapsed ：是否折叠完成。用于判断两个节点是否紧密相邻。举个例，有这样一个 HTML 文档片段<p id="p1">p1</p><p id="p2">p2</p>，分别获取"p1"、"p2"节点对象，创建range对象设定起点终点range.setStartAfter(p1); range.setEndBefore(p2)，因为"p1"和"p2"是相邻节点，所以range.collapsed的值为true。

⑤、比较 DOM 范围

compareBoundaryPoints(type, range) ：比较与 range 范围是否有公共边界（起点或终点），用于判断两个范围的位置关系。该方法有 3 种可能的返回值，0 表示两者位置相同；-1 表示自身的点在前；1 则表示自身的点在后。range 表示与自身比较的范围对象；type 表示比较方式的常量，常量值如下：
- Range.START_TO_START：0，比较两者的起点位置。
- Range.START_TO_END：1，比较自身的起点和目标的终点位置。
- Range.END_TO_END：2，比较两者的终点位置。
- Range.END_TO_START：3，比较自身的终点和目标的起点位置。

⑥、复制 DOM 范围

cloneRange() ：复制范围副本，返回的对象仍然是 Range 对象。要与cloneContents()方法区分。

⑦、清理 DOM 范围

detach() ：将 Range 对象从创建范围的文档中分离出该范围。（实测测试，该方法并没有什么用，之后调用deleteContents()方法仍然会删除 DOM。）

（2）、IE8 及其更早版本的范围

IE8 及其以下的版本都支持一种范围——文本范围（IE 特有）。

文本范围处理的主要是文本（不一定是 DOM 节点）。

①、创建一个 IE-DOM 的范围

createTextRange()：用来创建一个文本范围。

②、从 IE-DOM 中选择范围

findText()：寻找第一次出现的给定文本。有就返回 true，没有就返回 false。该方法可以接受两个参数，一个是要查找的文本，另一个是（可选的）找找方向。第二个参数为负值时向后查找，为正值时向前查找。
moveToElementText()：接受一个 DOM 元素，并选择该元素的所有文本，包括 HTML 标签。
- htmlText 属性：当文本范围包含 HTML 时，可以使用 htmlText 属性获取范围的全部内容（包括 HTML 和文本）。
parentElement()：随着范围选区的变化而动态更新文本选区的父节点。
move()：先会折叠当前范围（让起点和终点相等），然后再将范围移动指定的单位数量。接受两个参数，分别是移动单位 和 移动单位的数量。移动单位是下列一种字符串值（下同）：
- “character”：逐个字符地移动。
- “word”：逐个单词（一系列非空格字符）地移动。
- “sentence”：逐个句子（一系列以句号、问号或叹号结尾的字符）地移动。
- “textedit”：移动到当前范围选区的开始或结束位置。
moveStart()：对范围的起点，移动指定的单位数量。接受两个参数，分别是移动单位 和 移动单位的数量。
moveEnd()：对范围的终点，移动指定的单位数量。接受两个参数，分别是移动单位 和 移动单位的数量。
expand()：将范围规范化。接受两个参数，分别是移动单位 和 移动单位的数量。

③、操作 IE-DOM 范围中的内容

text 属性：获取或者设置范围中的内容文本，HTML 标签保持不变。
pasteHTML()：向范围中插入 HTML 代码。当范围中有 HTML 代码时，不要使用该方法，可能会导致 HTML 格式不正确。

④、折叠 IE-DOM 范围

collapse()：折叠范围。值为 true 时把范围折叠到起点，值为 false 时把范围折叠到终点。
boundingWidth 属性：表示范围是否已经折叠了。值为 0 时表示范围已经折叠了。

⑤、比较 IE-DOM 范围

compareEndPoints()：比较范围。接受两个参数，分别是比较的类型 和 要比较的范围。比较的类型有四种字符串：“StartToStart”、“StartToEnd”、“EndToStart” 和 “EndToEnd”。该方法有 3 种可能的返回值，0 表示两者位置相同；-1 表示自身的点在前；1 则表示自身的点在后。
isEqual()：确定两个范围是否相等。
inRange()：确定一个范围是否包含另一个范围。

⑥、复制 IE-DOM 范围

duplicate()：复制文本范围，返回一个原文本范围的副本。

五、DOM3

DOM3 对 DOM 进一步扩展。

1、DOM 的变化

（1）、Node 类型的变化

-->、针对 XML命名空间的变化

isDefaultNamespace(namespaceURI)：在指定的 namespaceURI 是当前节点的默认命名空间时，返回 true。
lookupPrefix(namespaceURI)：返回给定的 namespaceURI 的前缀。
lookupNamespaceURI(prefix)：返回给定的 prefix 的命名空间。

console.log(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml"));    // true
// 假设 svg 中包含着对 <s:svg> 的引用
console.log(svg.lookupPrefix("http://www.w3.org/2000/svg"));                      // s
console.log(svg.lookupNamespaceURI("s"));                                         // "http://www.w3.org/2000/svg"

-->、与命名空间无关的变化

isSameNode()：比较两个节点。接收一个节点参数，当传入的节点与引用的节点相同时，返回 true。“相同”指的是，两个节点引用的是同一个对象。
isEqualNode()：比较两个节点。接收一个节点参数，当传入的节点与引用的节点相等时，返回 true。“相等”指的是，两个节点的类型和属性都相同，而且他们的 attributes 和 childNodes 属性也相等（相同位置包含相同的值）。
setUserData()：添加额外数据，将数据指定给节点。接受三个参数，分别是要设置的键、实际数据（任何类型）和处理函数。
- 传入 setUserData() 方法中的处理函数会在带有数据的节点被复制、删除、重命名或引入一个文档时调用，因而你可以是先决定在上述操作发生时如何处理数据。处理函数接受 5 个参数：表示操作类型的数值（1 表示复制，2 表示导入，3 表示删除，4 表示重命名）、数据键、数据值、源节点和目标节点。在删除节点时，源节点是 null；除了在复制节点时，目标节点都是 null。
getUserData()：获取额外添加的数据。接受一个参数，设置的键。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Vue实例 - 收藏集 - 掘金
Vue.js 全家桶高还原网易云音乐 (Windows PC 版) - 前端 - 掘金项目地址由于网易云的api限制，部分功能可能会失效，如有需要可以clone项目下来在本地运行，如果api炸了，... 前端 vue2 + 后端 koa2, 全栈式开发 bilibili 首页 - 前端 - 掘金预览地址： http://www.lybenson.c…...
2024/4/24 13:36:23
我两年的web开发生涯
我两年的web开发生涯与以前的文章分享给大家自己的知识和观点不同，这篇文章更多的是写给自己的总结。现在是 2017年10月18. 从 2015年9月开始接触前端开发，至今两年零一个月。从 2016年3月入职中油瑞飞从事相关工作，至今一年零七个月。目前我即将离职，并于下个月加入…...
2024/4/24 13:36:22
从零开始用 webpack 搭建环境 :
个人博客迁移到 https://biubu.cn/,此处停更从零开始用 webpack 搭建环境 :1 必备条件：1.1 nodejs 环境; 1.2 当前以webpack 4.6 为主. 2 核心概念2.1 入口(entry):入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webp…...
2024/4/24 13:36:22
网页编程零框架解决方案
由于网页编程不同于客户端编程，在MVC的基础上，JavaScript社区产生了各种变体框架MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）等等，有人就把所有这一类框架的各种模式统称为MV*。框架的优点在于合理组织代码、便于团队合作和未来的维护，缺点在于有一定的学习…...
2024/4/23 6:53:53
Webpack4+Babel7优化70%速度
作者 DBCdouble项目源码demo：点击这里一、前言随着2018年2月15号webpack4.0.0出来已经有一段时间了，webpack依靠着“零配置”，“最高可提升98%的速度”成功吸粉无数，对于饱受项目打包时间过长的我，无疑是看到了曙光，于是决定开始试水。二、项目框架与环境升级前:Node: v8…...
2024/5/2 8:31:41
前端发展史
前段发展历史我们都知道现在流行的框架：Vue.Js、AngularJs、ReactJs，已经逐渐应用到各个项目和实际应用中，它们都是MVVM数据驱动框架系列的一种。在了解MVVM之前，我们先回顾一下前端发展的历史阶段，做到心中有数，才会更好理解。从静态走向动态 1994年可以看做…...
2024/4/15 3:51:23
[书籍精读]《你不知道的JavaScript（下卷）》精读笔记分享
写在前面书籍介绍：JavaScript这门语言简单易用，很容易上手，但其语言机制复杂微妙，即使是经验丰富的JavaScript开发人员，如果没有认真学习的话也无法真正理解。本套书直面当前JavaScript开发人员不求甚解的大趋势，深入理解语言内部的机制，全面介绍了JavaScript中常被人误…...
2024/4/27 18:16:57
Odi中不费吹灰之力的线程
介绍多线程是同时执行两个或多个线程的过程。大多数编程语言都提供了API，以方便使用线程和并行性。开发人员可以专注于应用程序逻辑，而不是通信通道，同步或体系结构设置。节点10.5添加了对具有实验性标志的worker_threads模块。但是从节点11.7开始，此功能是开箱即…...
2024/5/2 8:38:01
前端学习资料
常用工具：css在线手册jquery 1.8在线手册正则表达式语法css sprite图像拼接技编辑器推荐：Editplus，notepad++。截图截图工具：faststone capture服务器工具：xampp逻辑图工具：xmindsvn客户端工具推荐：TortoiseSVN http://tortoisesvn.net/downloads.html上传工具推荐：Wi…...
2024/4/15 3:51:20
透视前端工程化之二：Webpack 基本介绍
1 Webpack 的特点图片来源于网络 Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 Banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系，根据依赖关系将这些模块打包成一个或多个文件。目前几乎所有的前端构建和开发…...
2024/4/15 3:51:19
webpack4.0从零开始单页（多页）应用配置 (一)
理解webpack核心概念借用官网的话：“webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。…...
2024/4/15 3:51:18
创建React+MVC+开箱即用的工程化前端框架的思考-为什么创建@symph/joy
项目首页：https://lnlfps.github.io/symph-joy 我们希望有一个结合了next.js和dva优点的基础框架，它们都是目前非常流行的前端框架，next.js为我们解决了服务端渲染和零配置的问题，而dva能够更好的管理应用中的业务流程和数据，但两者现有结合的方案里，我们遇到了些问题，并…...
2024/4/24 13:36:20
开发中遇到的问题及基础知识点
js对节点的操作，添加，删除，获得父节点，子节点，兄弟节点 [javascript] 1.<pre name="code" class="javascript">var chils= s.childNodes; //得到s的全部子节点 2.var par=s.parentNode; //得到s的父节点 3.var ns=s.nextSbiling; //获得…...
2024/4/24 13:36:26
JavaScript中的数据结构和算法学习
原文链接：http://caibaojian.com/learn-javascript.html本文主要讲述Javascript中实现栈、队列、链表、集合、字典、散列表、树、图等数据结构，以及各种排序和搜索算法，包括冒泡排序、选择排序、插入排序、归并排序、快速排序、顺序搜索、二分搜索，最后还介绍了动态规划和贪…...
2024/4/24 13:36:18
12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作
本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表库的。另外Handsontable电子表格库也是蛮好玩的。前端开发工具在过去几年中取得了进步和成功。这些日子，JS库和框架可以简化工作流程，提高开发过程，并…...
2024/4/24 13:36:17
webpack 笔记整理~~
文章目录webpack核心功能、大型项目开发流程如何在浏览器端实现模块化课程简介浏览器端的模块化根本原因解决办法常见的构建工具webpack的安装和使用webpack简介webpack的安装使用(打包)模块化兼容性同模块化标准不同模块化标准最佳实践编译结果分析配置文件devtool 配置source…...
2024/4/24 13:36:18
看云电子书归档 2016.4
(译) JSON-RPC 2.0 规范(中文版)Gitee 下载 Github 下载 SourceForge 下载00后：移动互联网崛起新势力Gitee 下载 Github 下载 SourceForge 下载12条专业的JavaScript规则Gitee 下载 Github 下载 SourceForge 下载2014互联网女皇报告：去适应用户的习惯是明智之举Gitee 下载 Gi…...
2024/4/24 13:36:15
从零搭建webpack+react+router+redux项目踩坑之旅
使用 webpack 从零搭建 react项目的git地址：https://github.com/YueJingGe/webpack-react/tree/master初始化 npm yarn init 安装 webpack yarn add webpack -D 安装 webpack-cli yarn add webpack-cli -D 如果你使用 webpack v4+ 版本，你还需要安装 CLI。此工具用于在命令行…...
2024/4/24 13:36:14
MEAN框架学习笔记
MEAN框架学习笔记 MEAN开发框架的资料很少，主要的资料还是来自于learn.mean.io网站上的介绍。于是抱着一种零基础学习的心态，在了解的过程中，通过翻译加上理解将MEAN框架一点点消化并且吸收，一步一步来，慢慢地记录我学习MEAN的点点滴滴。1、MEAN是能够管理用户的通过MEAN…...
2024/4/24 13:36:13
从零搭建react 脚手架
前言目前前端最主流，应用最广的webpack总结下目前常用的构建工具facebook官方的create-react-app（官方推荐） create-react-app但是现在大部分公司都需要自己能搞定脚手架，所以大家还是能自己搭建为好（二）webpack基本概念入口(entry) 输出(output) loader 插件(plugins…...
2024/4/24 13:36:13

js DOM

前言

一、节点（Node）

1、Node 类型

（1）、Node类型的属性

（3）、Node类型的方法

2、Document 类型

（1）、Document 类型的特征

（2）、Document 类型的属性

（3）、Document 类型的方法

3、Element 类型

（1）、Element 类型的特征

（2）、Element 类型的属性

（3）、Element 类型的方法

4、Text 类型

（1）、Text 类型的特性

（2）、Text 类型的属性

（3）、Text 类型的方法

5、Comment 类型（了解）

6、CDATASection 类型（了解）

7、DocumentType 类型（了解）

8、DocumentFragment 类型（了解）

9、Attr 类型（了解）

二、DOM1 级操作技术

1、动态脚本

（1）、通过插入外部文件来添加动态脚本（该脚本会立即运行）

（2）、直接插入 JavaScript 代码来添加动态脚本

2、动态样式

（1）、通过插入外部文件来实现动态样式

（2）、直接插入 CSS 代码来实现动态样式

3、操作表格

（1）、Table 对象的描述

（2）、Table 对象的属性

（3）、Table 对象的方法

4、使用 NodeList

三、DOM1 级的扩展

1、DOM1 级的扩展属性

（1）、classList 属性——方便对 class 属性进行增删改查

（2）、activeElement 属性——辅助管理 DOM 焦点

（3）、readyState 属性——文档状态

（4）、compatMode 属性——兼容模式

（5）、head 属性

（6）、charset 属性——字符集

（7）、children 属性

（8）、innerHTML 属性和 outerHTML 属性——插入标记

（9）、innerText 属性和 outerText 属性——插入文本

（10）、自定义数据属性

2、DOM1 级的扩展方法

（1）、getElementsByClassName() 方法——获取元素

（2）、hasFocus() 方法——获取焦点

（3）、insertAdjacentHTML() 方法——插入标记

（4）、scrollIntoView() 方法——浏览器窗口滚动

（5）、contains() 方法——检测某个节点是不是另一个节点的后代

3、文档模式

四、DOM2

1、DOM2 中 DOM 的变化

（1）、节点变化

（2）、框架的变化

2、样式

（1）、访问元素的样式

（2）、操作样式列表

（3）、元素大小

3、遍历

（1）、NodeIterator 类型遍历

（2）、TreeWalker 类型遍历

4、范围

（1）、DOM 中的范围

（2）、IE8 及其更早版本的范围

五、DOM3

1、DOM 的变化

（1）、Node 类型的变化

相关文章

最新文章