遍历文档内容,得到HTML层级结构

2021-06-11 14:03

阅读:450

标签:lis   深度优先   深度优先遍历   ntc   item   访问   use   生成   span   

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

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

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

ul id = "mylist">
        li>Item 1li>
        li>Item 2li>
        li>Item 3li>
ul>

如果是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 = ‘‘;
            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);

    注:文档的根节点是document

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

    遍历文档内容,得到HTML层级结构

    标签:lis   深度优先   深度优先遍历   ntc   item   访问   use   生成   span   

    原文地址:http://www.cnblogs.com/ariel-zhang/p/7291544.html


  • 评论


    亲,登录后才可以留言!