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