JavaScript HTML DOM节点类型之Node类型介绍

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

  1. 返回节点类型:nodeType
  2. 返回节点名:nodeName
  3. 返回或设置节点值:nodeValue
  4. 节点间的关系
  5. 节点操作


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种节点类型nodeValuenodeName的返回值

节点类型 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中提供了几种节点遍历的属性:parentNodechildNodesfirstNode/lastNodepreviousSibling/nextSiblingownerDocument,详细请查看:JavaScript DOM文档遍历


5. 节点操作

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

5.1 添加节点:appendChild()insertBefore()

node.appendChild(node)
node.insertBefore(newnode, existingnode)

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

appendChildinsertBefore方法详细介绍请参考:JS创建DOM节点


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

node.replaceChild(newNode, oldNode);

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

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


5.3 节点复制:cloneNode()

node.cloneNode(deep)

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

节点复制后,并不会出现在文档中,需要调用appendChildinsertBeforereplaceChild方法将节点插入到文档中。示例如下:

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();

猜你喜欢

转载自blog.csdn.net/bfboys/article/details/54350721