html dom节点类型,JavaScript HTML DOM节点类型之Node类型介绍

JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。

1. 返回节点类型nodeType

node.nodeType

每个节点都有nodeType属性，该属性表示节点类型。节点类型由Node类型中定义12个常量表示：

常量值

常量名

1

Node.ELEMENT_NODE

2

Node.ATTRIBUTE_NODE

3

Node.TEXT_NODE

4

Node.CDATA_SECTION_NODE

5

Node.ENTITY_REFERENCE_NODE

6

Node.ENTITY_NODE

7

Node.PROCESSING_INSTRUCTION_NODE

8

Node.COMMENT_NODE

9

Node.DOCUMENT_NODE

10

Node.DOCUMENT_TYPE_NODE

11

Node.DOCUMENT_FRAGMENT_NODE

12

Node.NOTATION_NODE

这12种类型中，有些节点可以包含子节点，有些没有子节点，详细如下：

节点类型

描述

子节点

1

Element

代表元素

Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference

2

Attr

代表属性

Text, EntityReference

3

Text

代表元素或属性中的文本内容。

None

4

CDATASection

代表文档中的 CDATA 部

(不会由解析器解析的文本)

None

5

EntityReference

代表实体引用。

Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference

6

Entity

代表实体。

Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference

7

ProcessingInstruction

代表处理指令。

None

8

Comment

代表注释。

None

9

Document

代表整个文档(DOM 树的根节点)。

Element, ProcessingInstruction, Comment, DocumentType

10

DocumentType

向为文档定义的实体提供接口

None

11

DocumentFragment

代表轻量级的 Document 对象

(文档的某个部分)

Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference

12

Notation

代表 DTD 中声明的符号。

None

示例如下：

document.body.nodeType;

返回值为1，表示Element。

2. 返回节点名：nodeName

node.nodeName;

nodeName属性用于返回指定节点的节点名，节点名会以大写形式返回。示例如下：

document.body.nodeName;

// BODY

12种节点类型nodeValue和nodeName的返回值

节点类型

nodeName 返回值

nodeValue 返回值

1

Element

元素名

null

2

Attr

属性名称

属性值

3

Text

#text

节点的内容

4

CDATASection

#cdata-section

节点的内容

5

EntityReference

实体引用名称

null

6

Entity

实体名称

null

7

ProcessingInstruction

target

节点的内容

8

Comment

#comment

注释文本

9

Document

#document

null

10

DocumentType

文档类型名称

null

11

DocumentFragment

#document 片段

null

12

Notation

符号名称

null

3. 返回或设置节点值：nodeValue

node.nodeValue=value;

node.nodeValue;

该属性用于设置或返回指定节点的节点值。示例如下：

document.getElementById("myEle").nodeValue = 'my node';

document.getElementById("myEle").nodeValue;

4. 节点间的关系

文档中节点都存在着一定的关系，节点之间的关系可以使用类似人类家族关系的形式描述。如，在HTML文档中，可以把html标签看作是body标签的父元素；相对的，body标签也就是html标签的子元素；而做为body标签同级的head标签两都之者的关系为兄弟(姐妹)关系。

Node中提供了几种节点遍历的属性：parentNode、childNodes、firstNode/lastNode、previousSibling/nextSibling、ownerDocument，详细请查看：JavaScript DOＭ文档遍历

5. 节点操作

Node中节点遍历的属性都是只读，不能对文档节点进行操作。所以DOM又提供了一些方法，用于对节点进行操作。这些操作方法包括：添加、复制、修改(替换)、删除。

5.1 添加节点：appendChild()、insertBefore()

node.appendChild(node)

node.insertBefore(newnode, existingnode)

添加节点有两种方法：appendChild和insertBefore。appendChild用于添加子节点，它会向childNodes末尾添加一个节点。insertBefore方法用于添加兄弟节点，它会在指定的已有的子节点之前插入新节点。

appendChild和insertBefore方法详细介绍请参考：JS创建DOM节点。

5.2 节点修改(替换)：replaceChild()

node.replaceChild(newNode, oldNode);

appendChild和insertBefore方法只能插入节点，不会移除节点。replaceChild()方法可以将指定的节点移除，并使用新插入的节点替换原节点位置。示例如下：

document.getElementById("myEle").replaceChild(newnode, oldnode);

5.3 节点复制：cloneNode()

node.cloneNode(deep)

cloneNode方法用于对调用这个方法节点创建副本。该方法接受一个布尔型参数，用于设置是否执行深度复制。默认为false，当为true时，会复制指定节的整个子节点树。

节点复制后，并不会出现在文档中，需要调用appendChild、insertBefore或replaceChild方法将节点插入到文档中。示例如下：

var node=document.getElementById("myEle2").lastChild.cloneNode(true);

document.getElementById("myEle").appendChild(node);

5.4 节点移除：removeChild()

node.removeChild(node)

removeChild()方法移除指定元素的某个指定的子节点。操作成功后会以Node对象返回被删除的节点，如果节点不存在则返回null。示例如下：

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

5.5 处理文本节点：normalize()

node.normalize()

由于解析和DOM操作等原因，可能会出现文本节点没有文本或出现两个连续的文本节点的情况。normalize()方法会移除空的文本节点，并连接相邻的文本节点。示例如下：

document.getElementById("myEle").normalize();