遍历文档 html,遍历文档内容，得到HTML层级结构(示例代码)

嗯。。没发现有写好的，那就自己写一个，刚好自己今天看了DOM操作的知识点，巩固一下。

HTML可以表示为一个层次结构，生成的DOM Tree 就是类似与数据结构中的树一样，每个DOM节点都有它的childNodes(动态的类数组对象), parentNode(指向父节点)，nextSibling(下一个兄弟节点)，previousSibling(上一个兄弟节点)，还有辅助类的firstChild和lastChild。

因为不同浏览器中对节点的遍历处理的不一样，比如：

Item 1Item 2Item 3

如果是IE解析，ul 元素会有3个子节点，而其他浏览器，ul 元素有七个子节点，包括3个 li 元素和 4个文本节点(

元素之间的空格)，所以如果只想访问当前节点的元素子节点，在用childNodes遍历的时候需要先判断一下子节点的nodeType，如果等于1(element node)，再执行想要的操作。

H5对DOM操作也做了响应的扩展， 提供firstElementChild, lastElementChild, previousElementChild, nextElementChild 这样的更方便的元素遍历方式。

所以这道题就可以用树的深度优先遍历DOM Tree，来打印出HTML的层级结构。

代码如下：

//用document.write输出的时候：

var space = ‘‘;functionrenderD(node, space) {if(node === null) return;var child =node.firstElementChild;

space+= ‘    ‘;while(child != null && child.nodeName.toLowerCase() != ‘br‘) {

document.write(space+ child.nodeName + ‘
‘);

renderD(child, space);

child=child.nextElementSibling;

}

}

renderD(document, space);

//用console输出的时候

var space = ‘‘;functionrenderD(node, space) {if(node === null) return;var child =node.firstElementChild;

space+= ‘ ‘;while(child != null) {

console.log(space+ child.nodeName + ‘\n‘);

renderD(child, space);

child=child.nextElementSibling;

}

}

renderD(document, space);

注：文档的根节点是document

在JS红宝书中289页，我觉得它的元素遍历不对。。 那个while循环的条件完全就忽视掉了当前节点的最后一个子元素啊囧