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 DOM文档遍历
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();