DOM—节点

Posted 2020-08-11

节点的相关属性

1、nodeType：节点类型。返回的是一个数字，这个数字代表节点类型，只读。

节点类型： 1 — 元素类型：元素节点（标签）

节点类型： 2 — 元素类型：属性节点

节点类型： 3 — 元素类型：文本节点（标签里的内容）

节点类型： 8 — 元素类型：注释节点

节点类型： 9 — 元素类型：文档节点（整个节点）

注：标签之间的换行会出现一个空的文本节点。

2、nodeName：节点名称。返回当前节点的值，只读。

元素节点：nodeName与标签名相同；

属性节点：nodeName 返回的是属性的名；

文本节点：nodeName 返回的永远是#text；

文档节点：nodeName 返回的是#document；

3、nodeValue：节点值。

元素节点：nodeValue  返回的是undefined或null；

文本节点：nodeValue 返回的是文本本身；

属性节点：nodeValue 返回的是属性的值；

文档节点：nodeValue 返回null；

节点的相关操作

childNodes:返回一个数组，这个数组由给定元素节点的子节点构成；

firstChild:返回第一个子节点；

lastChild：返回最后一个子节点；

nextSibling:返回给定节点下一个节点；

previousSibling：返回给定节点上一个节点；

parentNode：返回给定节点的父节点；

nextElementSibling：返回给定节点下一个元素节点；

previousElementSibling：返回给定节点上一个元素节点；

hasChildNodes():判断是否有子节点，存在返回true，不存在返回false，文本节点也算是节点；

document.body：直接访问body这个节点。

访问节点的四种方式

1、通过ID访问：document.getElementById(id名称);

                返回指定ID的节点对象，具有唯一性，同一个页面，不能有相同的ID。

2、通过name访问：document.getElementByName(name值);

                     返回的是一个节点对象的集合（数组），name可以有多个相同的值。

3、通过class访问：document.getElementClassName(class值);

4、通过Tag（标签）访问：document.getElementByTagName(name值);

 

创建节点

1、CreateElement(name);     创建元素节点

2、CreateTextNode(text);    创建文本节点

3、CreateAttribute(name);  创建属性节点

4、CreateComment(text);   创建注释节点

5、CreateDocumentFragment();   创建文档碎片节点

添加节点

appendChild：指定节点的最后一个子节点列表之后，添加一个新的子节点。

删除节点

removeChild：删除子节点。

替换节点

replaceChild(newNode,oldChild);    替换子节点。

复制节点

cloneNode(节点名);    复制一个子节点。

注：节点名是boolean型：（1）true：加上所有子节点；
                            （2）false：只复制当前节点。

插入节点

insertBefore(newNode,oldNode)     插入到指定位置