JavaScript—DOM 核心之Node对象

在图书馆发现了绝版的《Javascript DOM 高级程序设计》，书已经出版很长时间了，即使在技术更新换代如此之快的时代，它仍然具有较高的阅读价值。

这是我大致整理的一些东西。

核心Node对象

1.节点名称，值和类型

用nodeName取节点名称。
Element.nodeName （返回元素的名称，大写）
Attr.nodeName （返回属性的名称，小写）

用nodeValue取节点值。
它只适用于少数的DOM对象。
Element.nodeValue （返回 null）
Attr.nodeValue （返回字符串形式的属性值）
Text.nodeValue （返回字符串形式的节点内容）

用nodeType取类型

还有一些没有显示出来的是不再建议被使用的。

2.父节点，子结点和同辈节点

关于父节点的用法：node.parentNode （取直接父节点）

关于子节点的用法：
node.childNodes （返回一个类数组的NodeList对象）
node.firstChild （返回第一个子节点）
node.lastChild （返回最后一个子节点）

关于同辈节点的用法：
node.previousSibling （前一个同辈节点）
node.nextSibling (后一个同辈节点）
第一个节点的previousSibling为null，最后一个同理。

3.节点的属性

node(especially element node).attributes
返回一个NamedNodeMap对象，注意不是数组。
链接为此种对象的具体使用方式。

https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap

常用的两种访问：
1）通过索引访问，如element.attributes[0]
2）getNamedItem()指定属性访问，如element.getNamedItem(‘href’)

4.节点的ownerDocument属性

指向节点所属的根文档的引用，当浏览器中的document未被覆盖时，即返回window.document的引用。

5.检测子节点和属性

检测是否存在子节点 node.hasChildNodes() 返回true | false

检测是否存在属性 node.hasAttributes() 返回 true | false

6.操纵DOM节点树

node.appendChild(NewChild)
node.insertBefore(NewChild, RefNode)
node.replaceChild(NewChild, OldChild)
node.removeChild(Child)

7.复制和移动节点

提示了新手常犯的错误，即操作一个文档中已经存在的引用时，会保持其唯一性。如 node.appendChild( test )，倘若这个test是一个文档中已经存在的引用，则该方法先清理原来位置的test，再将test加入到node的子节点中。