节点遍历方法
节点遍历实现
var oHtml = document.documentElement; //documentElement属性可返回文档的根节点
var p = document.getElementById("paragraph");
var txt = p.childNodes[0];
//var oHead = oHtml.firstChild;
//var oHead = oHtml.childNodes[0];
var oHead = oHtml.childNodes.item(0);
//var oBody = oHtml.childNodes.item(1);
var oBody = oHtml.childNode[1];
//console.log(oHead.parentNode == oHtml);
//console.log(oBody.parentNode == oHtml);
//console.log(oBody.previouSibling == oHead);
//console.log(oHead.nextSibling == oBody);
//console.log(oBody);
//console.log(oHead);
//console.log(oHtml.tagName); //tagName属性返回元素的标签名
console.log(p.owerDocument == document);
console.log(p.hasChildNodes()); //true
console.log(txt.hasChildNodes()); //false
解决空白节点
方法一
function myReady(){
var box = document.getElementById("box");
for(var i=0,len=box.childNodes.length; i<len; i++){
if(box.childNodes[i].nodeType == 1){
console.log(box.childNodes[i]);
}
}
}
方法二(IE8以下不支持)
function myReady(){
var box = document.getElementById("box");
for(var i=0,len=box.childElementCound; i<len; i++){
console.log(box.children[i]);
}
}
html部分
<ul id="box">
<li>001</li>
<li>002</li>
<li>003</li>
</ul>