用childNodes/firstChild/lastChild操作遍历元素element实例

网页中的html元素（element）为内外层叠或嵌套关系，嵌套深度通常在十层以内，大多情况下是六七层，据说嵌套太深不利于搜索引擎蜘蛛抓取。层与嵌套层之间为父子关系，外层为父，内层为子，如果再往子层的内层走，则为孩子的孩子；依据这种关系，javascript 就能遍历完一个网页的所有元素。

一个html元素（element）的所有孩子结点在javascript中，用childNodes表示，如果要具体表示一个孩子，像数组一样需要用下标（索引）；为操作方面，javascript 专门用 firstChild 表示第一个孩子，用 lastChild 表示最后一个孩子，所以如果只需对某个元素的第一个或最后一个孩子进行操作，不用获取所有孩子，只需用firstChild或lastChild即可。为便于在网页设计中应用，以下将分别举childNodes/firstChild/lastChild的实例。

一、实例所用html代码

<ul id="ulId"><li>ul的第一个childNode孩子（firstChild）</li><li>ul的第二个childNode孩子</li><li>ul的最后一个childNode孩子（lastChild）</li></ul>

二、javascript获取ul的第一个孩子

var ul = document.getElementById("ulId");
  var firstChildNode = ul.firstChild;
  alert(firstChildNode.innerHTML);

代码先获取到父元素ul，然后再获取ul的第一个孩子，最后输出ul的第一个孩子的文本，输出结果为：ul的第一个childNode孩子（firstChild），说明代码正确。

提示：如果第一个孩子是空格、换行符、制表符等，遵循 W3C 标准的浏览器也把他们当作孩子，如果输出他们的 innerHTML，会显示 undefined；旧版本的 Internet Explorer 不把他们当孩子。lastChildNode 和 childNodes 也一样。

三、javascript获取ul最后一个孩子

var ul = document.getElementById("ulId");
  var lastChildNode = ul.lastChild;
  alert(lastChildNode.innerHTML);

输出结果：ul的最后一个childNode孩子（lastChild）

四、javascript获取ul的所有孩子并遍历

var ul = document.getElementById("ulId");
  for (var i = 0; i < ul.childNodes.length; i++) {
    document.write(ul.childNodes[i].innerHTML + "<br />");
  }

代码获取ul的所有孩子结点（childNodes），然后用 for 循环遍历，在循环中输出每个孩子的文字内容；在实际应用中，只需要在 for 循环中加相应的条件即可。

如果出现错误 cannot read property childnodes of undefined，是孩子结点中有空格、换行符、制表符等导致，需要把它们过滤掉，只需加 if(ul.childNodes[i].innerHTML != undefined)，完整代码为：

for (var i = 0; i < ul.childNodes.length; i++) {
    if (ul.childNodes[i].innerHTML != undefined) {
      document.write(ul.childNodes[i].innerHTML + "<br />");
    }
  }