DOM_节点层次

一、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会复制事件 所以复制之前需要先移除事件。

上一篇:UCenter创始人密码正确但是登录不了


下一篇:刷题向》关于一道尺取法的神题目(BZOJ4653)(HARD-)(BZOJ 30题纪念)