节点的相关属性
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) 插入到指定位置