JavaScript—DOM 核心之Node对象

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

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

核心Node对象

1.节点名称,值和类型

用nodeName取节点名称。
Element.nodeName (返回元素的名称,大写)
Attr.nodeName (返回属性的名称,小写)

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

用nodeType取类型

JavaScript—DOM 核心之Node对象

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

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的子节点中。