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 结构的变化反映出来
- NodeList 实例
- parentNode
- 指向其 DOM 树中的父元素
- previousSibling / nextSibling
- 在其 parentNode 的 childNodes 列表的节点间导航,上一个同胞节点 / 下一个同胞节点
- 第一个节点的 previouseSibling 为 null
- 最后一个节点的 nextSibling 为 null
- firstChild / lastChild
- childNodes 中的第一个 / 最后一个子节点
Element Traversal 属性
IE9 之前的版本不会把元素之间的空格当成空白节点,而其化浏览器会。导致了childNodes 和 firstChild 等属性上的差异。
W3C 通过新的 Element Traversa l规范针对访问元素节点的属性
- childElementCount == children.length 子元素节点数量
- parentElement / children (>IE7) 父元素节点 / 子元素节点
- firstElementChild / lastElementChild
- nextElementSibling / previousElementSibling
IE9及以上版本,以及所有现代浏览器都支持 Element Traversal 属性