节点遍历

节点遍历方法

节点遍历实现

            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>