DOM1 描述 Node 的接口,这个接口是所有 DOM 节点都必须实现。Node 接口在 JavaScript 由 Node 类型实现。
在 JavaScript 中,所有节点类型都继承 Node 类型,所以所有类型都共享相同的基本属性和方法。

每个节点都有 nodeType 属性,表示节点的类型

常量 描述
Node.ELEMENT_NODE 1 一个[元素](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)节点,例如 [<p>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p)[<div>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div)
Node.ATTRIBUTE_NODE 2 元素 的耦合属性 。在 DOM4 规范里Node 接口将不再实现这个元素属性
Node.TEXT_NODE 3 Element 或者 Attr 中实际的文字
Node.CDATA_SECTION_NODE 4 一个 [CDATASection](https://developer.mozilla.org/zh-CN/docs/Web/API/CDATASection),例如 <!CDATA[[ … ]]>
Node.ENTITY_REFERENCE_NODE 5
Node.ENTITY_NODE 6
Node.PROCESSING_INSTRUCTION_NODE 7 一个用于XML文档的 [ProcessingInstruction](https://developer.mozilla.org/zh-CN/docs/Web/API/ProcessingInstruction),例如 <?xml-stylesheet ... ?> 声明
Node.COMMENT_NODE 8 一个 [Comment](https://developer.mozilla.org/zh-CN/docs/Web/API/Comment) 节点。
Node.DOCUMENT_NODE 9 一个 [Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document) 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的[DocumentType](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentType)节点。例如 <!DOCTYPE html> 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE 11 一个 [DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment)节点
Node.NOTATION_NODE 12

浏览器并不支持所有节点类型。最常用到的是 元素节点1 和 文本节点3

nodeName 与 nodeValue

nodeName 与 nodeValue 保存有关节点的信息,这两个属性的值完全取决于节点

nodeName 节点名称

只读属性

接口 nodeName属性值 例子
Attr 等同于
[Attr.name](https://developer.mozilla.org/zh-CN/docs/DOM/Attr.name)
属性的值
CDATASection “#cdata-section”
Comment “#comment”
Document “#document”
DocumentFragment “#document-fragment”
DocumentType 等同于 [DocumentType.name](https://developer.mozilla.org/zh-CN/docs/DOM/DocumentType.name) 属性的值
Element 等同于 [Element.tagName](https://developer.mozilla.org/zh-CN/docs/DOM/element.tagName) 属性的值 DIV
Entity 实体名称
EntityReference 实体引用名称
Notation Notation名称
ProcessingInstruction 等同于 [ProcessingInstruction.target](https://developer.mozilla.org/zh-CN/docs/DOM/ProcessingInstruction.target) 属性的值
text “#text”

nodeValue 节点值

对于文档节点来说, nodeValue返回null。对于text, comment, 和 CDATA 节点来说,,nodeValue返回该节点的文本内容。对于 attribute 节点来说, 返回该属性的属性值。

Node Value of nodeValue
[CDATASection](https://developer.mozilla.org/zh-CN/docs/Web/API/CDATASection) CDATA的文本内容
[Comment](https://developer.mozilla.org/zh-CN/docs/Web/API/Comment) 注释的文本内容
[Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document) null
[DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment) null
[DocumentType](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentType) null
[Element](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) null
[NamedNodeMap](https://developer.mozilla.org/zh-CN/docs/Web/API/NamedNodeMap) null
[EntityReference](https://developer.mozilla.org/zh-CN/docs/Web/API/EntityReference) null
[Notation](https://developer.mozilla.org/zh-CN/docs/Web/API/Notation) null
[ProcessingInstruction](https://developer.mozilla.org/zh-CN/docs/Web/API/ProcessingInstruction) 整个标签的文本内容
[Text](https://developer.mozilla.org/zh-CN/docs/Web/API/Text) 文本节点的内容

节点关系

DOM 树的结构

文档中的所有节点都与其它节点有关系,这些关系可以形容为家庭关系。 在HTML中,元素是元素的子元素,而元素则是元素的父元素。 元素是元素的同胞元素,因为它们有共同的父元素。

节点属性

  • childNodes
    • NodeList 实例
      • 一个实时的活动对象(类数组)
      • 会自动地根据 DOM 结构的变化反映出来
  • parentNode
    • 指向其 DOM 树中的父元素
  • previousSibling / nextSibling
    • 在其 parentNode 的 childNodes 列表的节点间导航,上一个同胞节点 / 下一个同胞节点
    • 第一个节点的 previouseSibling 为 null
    • 最后一个节点的 nextSibling 为 null
  • firstChild / lastChild
    • childNodes 中的第一个 / 最后一个子节点

image.png

Element Traversal 属性

IE9 之前的版本不会把元素之间的空格当成空白节点,而其化浏览器会。导致了childNodes 和 firstChild 等属性上的差异。
W3C 通过新的 Element Traversa l规范针对访问元素节点的属性

  • childElementCount == children.length 子元素节点数量
  • parentElement / children (>IE7) 父元素节点 / 子元素节点

DOM扩展

  • firstElementChild / lastElementChild
  • nextElementSibling / previousElementSibling

    IE9及以上版本,以及所有现代浏览器都支持 Element Traversal 属性

操纵节点

操纵节点