遍历文档内容，得到HTML层级结构
2021-06-11 14:03
标签：lis 深度优先 深度优先遍历 ntc item 访问 use 生成 span 嗯。。没发现有写好的，那就自己写一个，刚好自己今天看了DOM操作的知识点，巩固一下。 HTML可以表示为一个层次结构，生成的DOM Tree 就是类似与数据结构中的树一样，每个DOM节点都有它的childNodes（动态的类数组对象）, parentNode（指向父节点），nextSibling（下一个兄弟节点），previousSibling（上一个兄弟节点），还有辅助类的firstChild和lastChild。 因为不同浏览器中对节点的遍历处理的不一样，比如： 如果是IE解析，ul 元素会有3个子节点，而其他浏览器，ul 元素有七个子节点，包括3个 li 元素和 4个文本节点（ H5对DOM操作也做了响应的扩展， 提供firstElementChild, lastElementChild, previousElementChild, nextElementChild 这样的更方便的元素遍历方式。 所以这道题就可以用树的深度优先遍历DOM Tree，来打印出HTML的层级结构。 代码如下： 注：文档的根节点是document 在JS红宝书中289页，我觉得它的元素遍历不对。。 那个while循环的条件完全就忽视掉了当前节点的最后一个子元素啊囧 遍历文档内容，得到HTML层级结构 标签：lis 深度优先 深度优先遍历 ntc item 访问 use 生成 span 原文地址：http://www.cnblogs.com/ariel-zhang/p/7291544.htmlul id = "mylist">
li>Item 1li>
li>Item 2li>
li>Item 3li>
ul>
//用document.write输出的时候：
var space = ‘‘;
function renderD(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 = ‘‘;
function renderD(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);