一、DOM1级定义了一个Node接口,这个接口是由DOM中的所有节点类型实现的。Node接口共有12种节点类型,常见的是元素节点、文本节点和文档节点。
Node.ELEMENT_NODE(1);——元素节点
Node.Text_NODE(3);——文本节点
Node.DOCUMENT_NODE(9);——文档节点
二、IE浏览器没有Node类型的构造函数,保证兼容,可以做以下比较:检查节点类型 是否是元素
if (someNode.nodeType == 1) { //兼容所有浏览器
alert('Node is an element');
value = someNode.nodeName;
}}
对于 元素节点 nodeName始终是标签名 nodeValue始终是null
三、每个节点都有childNodes属性,保存着一个NodeList对象。NodeList是类数组对象,但并不是Array的实例,是对象,并且是实时更新。
someNode.childNodes[0] || someNode.childNodes.item(0)
NodeList转换为数组:
function coverToArray(nodes) {
var array = null;
try {
array = Array.protoType.slice.call(nodes,0);//其他浏览器
} catch(ex){
array = new Array();
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i]);//IE8以及更早版本
}
}
return array;
}
注:hasChildNodes() 返回布尔值 查询是否存在子节点 效率高于查询childNodes列表
所有节点都有ownerDocument 指向整个文档的文档节点(document).
四、节点操作
appendChild(新节点) 在末尾添加一个节点,
insertBefre(新节点,参照节点) 插入到特定位置
replaceChild(新节点,老节点) 替换节点 老节点还在文档 但是没有位置
removeChild(节点) 删除节点 节点还在文档 但是没有位置
cloneNode(布尔值) true:深复制
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
myList = document.getElementById("list");
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length)//3(IE <9) 或者 7 (其他浏览器)
IE8— 不为空白符创建节点 因此为3
cloneNode()不会复制事件 但是IE会复制事件 所以复制之前需要先移除事件。