节点层次
node类型
nodeType:每个节点都有一个nodeType 属性,用于表明节点的类型。
- 元素的nodeType为1。
- 属性的nodeType为2。
- 文本的nodeType为3。
if (someNode.nodeType == 1){ //适用于所有浏览器
alert("Node is an element.");
}
nodeName 和nodeValue 属性
对于元素节点,nodeName 中保存的始终都是元素的标签名,而nodeValue 的值则始终为null。
if (someNode.nodeType == 1){
value = someNode.nodeName; //nodeName 的值是元素的标签名
}
节点关系
每个节点都有一个childNodes 属性,其中保存着一个NodeList 对象。NodeList 是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
将NodeList 对象转换为数组:
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
每隔节点都有parentNode 属性,该属性指向文档树中的父节点。通过使用列表中每个节点的previousSibling和nextSibling 属性,可以访问同一列表中的其他节点。
<body>
<div>
<p></p>
<img src='...'/>
<div>
</body>
p和img就是同胞元素。通过p的previousSibling是文本节点,因为空白属于文本节点。
父节点的firstChild 和lastChild属性分别指向其childNodes 列表中的第一个和最后一个节点。
节点关系图:
ownerDocument:每个元素的ownerDocument属性指向表示整个文档的文档节点,即document对象。
操作节点
appendChild():用于向childNodes 列表的末尾添加一个节点。
insertBefore():把节点放在childNodes 列表中某个特定的位置上。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。
replaceChild():替换节点,接受的两个参数是:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。
removeChild():移除节点。
cloneNode:。复制节点,cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树;在参数为false 的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。例如:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
var oU = document.getElementsByTagName('ul')[0];
alert(oU.childNodes.length);//7
var deepClone = oU.cloneNode(true);
alert(deepClone.childNodes.length);//7
var shallowClone = oU.cloneNode(false);
alert(shallowClone.childNodes.length);//0
normalize():由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时,就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点,则删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。