首页 > 代码库 > DOM—节点

DOM—节点

节点的相关属性

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)     插入到指定位置

 

    

DOM—节点