ECMA Script 5学习笔记—8.2 DOM：Node接口

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

1.属性

1.1 Node.prototype.nodeType

nodeType属性返回一个整数值，表示节点的类型，Node 对象定义了几个常量，对应这些类型值。

对应值如下：

• 元素节点：1，对应常量Node.ELEMENT_NODE
• 属性节点：2，对应常量Node.ATTRIBUTE_NODE
• 文本节点：3，对应常量Node.TEXT_NODE
• 注释节点：8，对应常量Node.COMMENT_NODE
• 文档节点：9，对应常量Node.COCUMENT_NODE
• 文档类型节点：10，对应常量Node.DOCUMENT_NODE
• 文档片断节点：11，对应常量Node.DOCCUMENT_FRAGMENT_NODE

1.2 Node.prototype.nodeName

nodeName属性返回节点名称。

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

• 文档节点：#document
• 元素节点element:大写的标签名
• 属性节点attr：属性的名称
• 文本节点text：#text
• 文档片段节点：#document-fragment
• 文档类型节点：文档类型
• 注释节点：#comment

1.3Node.prototype.nodeValue

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

只有文本节点text、注释节点comment和属性节点attr有文本值，因此只有这三类节点的nodeValue有返回值，其他一律返回null。

1.4 Node.prototype.textContent

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

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

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

1.5 Node.prototype.baseURI

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

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

1.6Node.prototype.ownerDocument

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

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

1.7Node.prototype.nextSibling

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

1.8Node.prototype.previousSibling

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

1.9Node.prototype.parentNode

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

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

1.10Node.prototype.parentElement

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

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

1.11 Node.prototype.firstChild，Node.prototype.lastChild

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
注意，firstChild返回的除了元素节点，还可能是文本节点或注释节点。

1.12 Node.prototype.childNodes

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

1.13 Node.prototype.isConnected

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

2.方法

2.1 Node.prototype.appendChild()

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

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

2.2Node.prototype.hasChildNodes()

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

2.3Node.prototype.cloneNode()

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

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

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

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

2.4 Node.prototype.insertBefore()

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

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

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

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

2.5 Node.prototype.removeChild()

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

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

2.6 Node.prototype.replaceChild()

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

2.7 Node.prototype.contains()

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

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