Node 接口

所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。

属性 #

Node.prototype.nodeType #

nodeType 属性返回一个整数值，表示节点的类型。

document.nodeType // 9

上面代码中，文档节点的类型值为9。

Node 对象定义了几个常量，对应这些类型值。

document.nodeType === Node.DOCUMENT_NODE // true

上面代码中，文档节点的 nodeType 属性等于常量 Node.DOCUMENT_NODE 。

不同节点的 nodeType 属性值和对应的常量如下。

• 文档节点（document）：9，对应常量 Node.DOCUMENT_NODE
• 元素节点（element）：1，对应常量 Node.ELEMENT_NODE
• 属性节点（attr）：2，对应常量 Node.ATTRIBUTE_NODE
• 文本节点（text）：3，对应常量 Node.TEXT_NODE
• 文档片断节点（DocumentFragment）：11，对应常量 Node.DOCUMENT_FRAGMENT_NODE
• 文档类型节点（DocumentType）：10，对应常量 Node.DOCUMENT_TYPE_NODE
• 注释节点（Comment）：8，对应常量 Node.COMMENT_NODE

确定节点类型时，使用 nodeType 属性是常用方法。

var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log('该节点是元素节点');
}

Node.prototype.nodeName #

nodeName 属性返回节点的名称。

// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"

上面代码中，元素节点 <div> 的 nodeName 属性就是大写的标签名 DIV 。

不同节点的 nodeName 属性值如下。

• 文档节点（document）： #document
• 元素节点（element）：大写的标签名
• 属性节点（attr）：属性的名称
• 文本节点（text）： #text
• 文档片断节点（DocumentFragment）： #document-fragment
• 文档类型节点（DocumentType）：文档的类型
• 注释节点（Comment）： #comment

Node.prototype.nodeValue #

nodeValue 属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。

只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，因此这三类节点的 nodeValue 可以返回结果，其他类型的节点一律返回 null 。同样的，也只有这三类节点可以设置 nodeValue 属性的值，其他类型的节点设置无效。

// HTML 代码如下
// <div id="d1">hello world</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "hello world"

上面代码中， div 是元素节点， nodeValue 属性返回 null 。 div.firstChild 是文本节点，所以可以返回文本值。

Node.prototype.textContent #

textContent 属性返回当前节点和它的所有后代节点的文本内容。

// HTML 代码为
// <div id="divA">This is <span>some</span> text</div>

document.getElementById('divA').textContent
// This is some text

textContent 属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。

该属性是可读写的，设置该属性的值，会用一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容。

document.getElementById('foo').textContent = '<p>GoodBye!</p>';

上面代码在插入文本时，会将 <p> 标签解释为文本，而不会当作标签处理。

对于文本节点（text）、注释节点（comment）和属性节点（attr）， textContent 属性的值与 nodeValue 属性相同。对于其他类型的节点，该属性会将每个子节点（不包括注释节点）的内容连接在一起返回。如果一个节点没有子节点，则返回空字符串。

文档节点（document）和文档类型节点（doctype）的 textContent 属性为 null 。如果要读取整个文档的内容，可以使用 document.documentElement.textContent 。

Node.prototype.baseURI #

baseURI 属性返回一个字符串，表示当前网页的绝对路径。浏览器根据这个属性，计算网页上的相对路径的 URL。该属性为只读。

// 当前网页的网址为
// http://www.example.com/index.html
document.baseURI
// "http://www.example.com/index.html"

如果无法读到网页的 URL， baseURI 属性返回 null 。

该属性的值一般由当前网址的 URL（即 window.location 属性）决定，但是可以使用 HTML 的 <base> 标签，改变该属性的值。

<base href="http://www.example.com/page.html">

设置了以后， baseURI 属性就返回 <base> 标签设置的值。

Node.prototype.ownerDocument #

Node.ownerDocument 属性返回当前节点所在的顶层文档对象，即 document 对象。

var d = p.ownerDocument;
d === document // true

document 对象本身的 ownerDocument 属性，返回 null 。

Node.prototype.nextSibling #

Node.nextSibling 属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回 null 。

// HTML 代码如下
// <div id="d1">hello</div><div id="d2">world</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

d1.nextSibling === d2 // true

上面代码中， d1.nextSibling 就是紧跟在 d1 后面的同级节点 d2 。

注意，该属性还包括文本节点和注释节点（ <!-- comment --> ）。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。

nextSibling 属性可以用来遍历所有子节点。

var el = document.getElementById('div1').firstChild;

while (el !== null) {
  console.log(el.nodeName);
  el = el.nextSibling;
}

上面代码遍历 div1 节点的所有子节点。

Node.prototype.previousSibling #

previousSibling 属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回 null 。

// HTML 代码如下
// <div id="d1">hello</div><div id="d2">world</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

d2.previousSibling === d1 // true

上面代码中， d2.previousSibling 就是 d2 前面的同级节点 d1 。

注意，该属性还包括文本节点和注释节点。因此如果当前节点前面有空格，该属性会返回一个文本节点，内容为空格。

Node.prototype.parentNode #

parentNode 属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。

if (node.parentNode) {
  node.parentNode.removeChild(node);
}

上面代码中，通过 node.parentNode 属性将 node 节点从文档里面移除。

文档节点（document）和文档片段节点（documentfragment）的父节点都是 null 。另外，对于那些生成后还没插入 DOM 树的节点，父节点也是 null 。

Node.prototype.parentElement #

parentElement 属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回 null 。

if (node.parentElement) {
  node.parentElement.style.color = 'red';
}

上面代码中，父元素节点的样式设定了红色。

由于父节点只可能是三种类型：元素节点、文档节点（document）和文档片段节点（documentfragment）。 parentElement 属性相当于把后两种父节点都排除了。

Node.prototype.firstChild，Node.prototype.lastChild #

firstChild 属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回 null 。

// HTML 代码如下
// <p id="p1"><span>First span</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "SPAN"

上面代码中， p 元素的第一个子节点是 span 元素。

注意， firstChild 返回的除了元素节点，还可能是文本节点或注释节点。

// HTML 代码如下
// <p id="p1">
//   <span>First span</span>
//  </p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "#text"

上面代码中， p 元素与 span 元素之间有空白字符，这导致 firstChild 返回的是文本节点。

lastChild 属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回 null 。用法与 firstChild 属性相同。

Node.prototype.childNodes #

childNodes 属性返回一个类似数组的对象（ NodeList 集合），成员包括当前节点的所有子节点。

var children = document.querySelector('ul').childNodes;

上面代码中， children 就是 ul 元素的所有子节点。

使用该属性，可以遍历某个节点的所有子节点。

var div = document.getElementById('div1');
var children = div.childNodes;

for (var i = 0; i < children.length; i++) {
  // ...
}

文档节点（document）就有两个子节点：文档类型节点（docType）和 HTML 根元素节点。

var children = document.childNodes;
for (var i = 0; i < children.length; i++) {
  console.log(children[i].nodeType);
}
// 10
// 1

上面代码中，文档节点的第一个子节点的类型是10（即文档类型节点），第二个子节点的类型是1（即元素节点）。

注意，除了元素节点， childNodes 属性的返回值还包括文本节点和注释节点。如果当前节点不包括任何子节点，则返回一个空的 NodeList 集合。由于 NodeList 对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

Node.prototype.isConnected #

isConnected 属性返回一个布尔值，表示当前节点是否在文档之中。

var test = document.createElement('p');
test.isConnected // false

document.body.appendChild(test);
test.isConnected // true

上面代码中， test 节点是脚本生成的节点，没有插入文档之前， isConnected 属性返回 false ，插入之后返回 true 。

方法 #

Node.prototype.appendChild() #

appendChild() 方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

var p = document.createElement('p');
document.body.appendChild(p);

上面代码新建一个 <p> 节点，将其插入 document.body 的尾部。

如果参数节点是 DOM 已经存在的节点， appendChild() 方法会将其从原来的位置，移动到新位置。

var div = document.getElementById('myDiv');
document.body.appendChild(div);

上面代码中，插入的是一个已经存在的节点 myDiv ，结果就是该节点会从原来的位置，移动到 document.body 的尾部。

如果 appendChild() 方法的参数是 DocumentFragment 节点，那么插入的是 DocumentFragment 的所有子节点，而不是 DocumentFragment 节点本身。返回值是一个空的 DocumentFragment 节点。

Node.prototype.hasChildNodes() #

hasChildNodes 方法返回一个布尔值，表示当前节点是否有子节点。

var foo = document.getElementById('foo');

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}

上面代码表示，如果 foo 节点有子节点，就移除第一个子节点。

注意，子节点包括所有类型的节点，并不仅仅是元素节点。哪怕节点只包含一个空格， hasChildNodes 方法也会返回 true 。

判断一个节点有没有子节点，有许多种方法，下面是其中的三种。

• node.hasChildNodes()
• node.firstChild !== null
• node.childNodes && node.childNodes.length > 0

hasChildNodes 方法结合 firstChild 属性和 nextSibling 属性，可以遍历当前节点的所有后代节点。

function DOMComb(parent, callback) {
  if (parent.hasChildNodes()) {
    for (var node = parent.firstChild; node; node = node.nextSibling) {
      DOMComb(node, callback);
    }
  }
  callback(parent);
}

// 用法
DOMComb(document.body, console.log)

上面代码中， DOMComb 函数的第一个参数是某个指定的节点，第二个参数是回调函数。这个回调函数会依次作用于指定节点，以及指定节点的所有后代节点。

Node.prototype.cloneNode() #

cloneNode 方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。

var cloneUL = document.querySelector('ul').cloneNode(true);

该方法有一些使用注意点。

（1）克隆一个节点，会拷贝该节点的所有属性，但是会丧失 addEventListener 方法和 on- 属性（即 node.onclick = fn ），添加在这个节点上的事件回调函数。

（2）该方法返回的节点不在文档之中，即没有任何父节点，必须使用诸如 Node.appendChild 这样的方法添加到文档之中。

（3）克隆一个节点之后，DOM 有可能出现两个有相同 id 属性（即 id="xxx" ）的网页元素，这时应该修改其中一个元素的 id 属性。如果原节点有 name 属性，可能也需要修改。

Node.prototype.insertBefore() #

insertBefore 方法用于将某个节点插入父节点内部的指定位置。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertBefore 方法接受两个参数，第一个参数是所要插入的节点 newNode ，第二个参数是父节点 parentNode 内部的一个子节点 referenceNode 。 newNode 将插在 referenceNode 这个子节点的前面。返回值是插入的新节点 newNode 。

var p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);

上面代码中，新建一个 <p> 节点，插在 document.body.firstChild 的前面，也就是成为 document.body 的第一个子节点。

如果 insertBefore 方法的第二个参数为 null ，则新节点将插在当前节点内部的最后位置，即变成最后一个子节点。

var p = document.createElement('p');
document.body.insertBefore(p, null);

上面代码中， p 将成为 document.body 的最后一个子节点。这也说明 insertBefore 的第二个参数不能省略。

注意，如果所要插入的节点是当前 DOM 现有的节点，则该节点将从原有的位置移除，插入新的位置。

由于不存在 insertAfter 方法，如果新节点要插在父节点的某个子节点后面，可以用 insertBefore 方法结合 nextSibling 属性模拟。

parent.insertBefore(s1, s2.nextSibling);

上面代码中， parent 是父节点， s1 是一个全新的节点， s2 是可以将 s1 节点，插在 s2 节点的后面。如果 s2 是当前节点的最后一个子节点，则 s2.nextSibling 返回 null ，这时 s1 节点会插在当前节点的最后，变成当前节点的最后一个子节点，等于紧跟在 s2 的后面。

如果要插入的节点是 DocumentFragment 类型，那么插入的将是 DocumentFragment 的所有子节点，而不是 DocumentFragment 节点本身。返回值将是一个空的 DocumentFragment 节点。

Node.prototype.removeChild() #

removeChild 方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

上面代码移除了 divA 节点。注意，这个方法是在 divA 的父节点上调用的，不是在 divA 上调用的。

下面是如何移除当前节点的所有子节点。

var element = document.getElementById('top');
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

被移除的节点依然存在于内存之中，但不再是 DOM 的一部分。所以，一个节点移除以后，依然可以使用它，比如插入到另一个节点下面。

如果参数节点不是当前节点的子节点， removeChild 方法将报错。

Node.prototype.replaceChild() #

replaceChild 方法用于将一个新的节点，替换当前节点的某一个子节点。

var replacedNode = parentNode.replaceChild(newChild, oldChild);

上面代码中， replaceChild 方法接受两个参数，第一个参数 newChild 是用来替换的新节点，第二个参数 oldChild 是将要替换走的子节点。返回值是替换走的那个节点 oldChild 。

var divA = document.getElementById('divA');
var newSpan = document.createElement('span');
newSpan.textContent = 'Hello World!';
divA.parentNode.replaceChild(newSpan, divA);

上面代码是如何将指定节点 divA 替换走。

Node.prototype.contains() #

contains 方法返回一个布尔值，表示参数节点是否满足以下三个条件之一。

• 参数节点为当前节点。
• 参数节点为当前节点的子节点。
• 参数节点为当前节点的后代节点。

document.body.contains(node)

上面代码检查参数节点 node ，是否包含在当前文档之中。

注意，当前节点传入 contains 方法，返回 true 。

nodeA.contains(nodeA) // true

Node.prototype.compareDocumentPosition() #

compareDocumentPosition 方法的用法，与 contains 方法完全一致，返回一个六个比特位的二进制值，表示参数节点与当前节点的关系。

// HTML 代码如下
// <div id="mydiv">
//   <form><input id="test" /></form>
// </div>

var div = document.getElementById('mydiv');
var input = document.getElementById('test');

div.compareDocumentPosition(input) // 20
input.compareDocumentPosition(div) // 10

上面代码中，节点 div 包含节点 input （二进制 010000 ），而且节点 input 在节点 div 的后面（二进制 000100 ），所以第一个 compareDocumentPosition 方法返回 20 （二进制 010100 ，即 010000 + 000100 ），第二个 compareDocumentPosition 方法返回 10 （二进制 001010 ）。

由于 compareDocumentPosition 返回值的含义，定义在每一个比特位上，所以如果要检查某一种特定的含义，就需要使用比特位运算符。

var head = document.head;
var body = document.body;
if (head.compareDocumentPosition(body) & 4) {
  console.log('文档结构正确');
} else {
  console.log('<body> 不能在 <head> 前面');
}

上面代码中， compareDocumentPosition 的返回值与 4 （又称掩码）进行与运算（ & ），得到一个布尔值，表示 <head> 是否在 <body> 前面。

Node.prototype.isEqualNode()，Node.prototype.isSameNode() #

isEqualNode 方法返回一个布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

var p1 = document.createElement('p');
var p2 = document.createElement('p');

p1.isEqualNode(p2) // true

isSameNode 方法返回一个布尔值，表示两个节点是否为同一个节点。

var p1 = document.createElement('p');
var p2 = document.createElement('p');

p1.isSameNode(p2) // false
p1.isSameNode(p1) // true

Node.prototype.normalize() #

normalize 方法用于清理当前节点内部的所有文本节点（text）。它会去除空的文本节点，并且将毗邻的文本节点合并成一个，也就是说不存在空的文本节点，以及毗邻的文本节点。

var wrapper = document.createElement('div');

wrapper.appendChild(document.createTextNode('Part 1 '));
wrapper.appendChild(document.createTextNode('Part 2 '));

wrapper.childNodes.length // 2
wrapper.normalize();
wrapper.childNodes.length // 1

上面代码使用 normalize 方法之前， wrapper 节点有两个毗邻的文本子节点。使用 normalize 方法之后，两个文本子节点被合并成一个。

该方法是 Text.splitText 的逆方法，可以查看《Text 节点对象》一章，了解更多内容。

Node.prototype.getRootNode() #

getRootNode() 方法返回当前节点所在文档的根节点 document ，与 ownerDocument 属性的作用相同。

document.body.firstChild.getRootNode() === document
// true
document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocument
// true

该方法可用于 document 节点自身，这一点与 document.ownerDocument 不同。

document.getRootNode() // document
document.ownerDocument // null