「可收藏代码01」遍历 DOM 树并打印xxx

最新推荐文章于 2022-01-05 14:17:08 发布

转载最新推荐文章于 2022-01-05 14:17:08 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ce0bc31f265da1b8a4eed0a

文章标签：

#数据结构与算法

1. 遍历 DOM 树并打印节点类型及名称

function consoAllNodeName(parentNode) {
    let nodeType = '';
    parentNode.childNodes.forEach(element => {
        switch (element.nodeType) {
            case 1:
                nodeType = 'Element node:';
                break;
            case 3:
                nodeType = 'Text node:';
                break;
            case 7:
                nodeType = 'XML ProcessingInstruction:';
                break;
            case 8:
                nodeType = 'Comment node:';
                break;
            case 9:
                nodeType = 'Document node:';
                break;
            case 10:
                nodeType = 'DocumentType node:';
                break;
            case 11:
                nodeType = 'DocumentFragment node:';
                break;
            default:
                nodeType = 'Unknown type node:';
                break;
        }
        console.log(nodeType + element.nodeName.toUpperCase());

        if (element.firstChild) {
            consoAllNodeName(element);
        } else {

        }

    })
}

consoAllNodeName(document);
复制代码

2. 遍历 DOM 树并打印所有元素的 tagName

function consoAllTagName(parentNode) {

    let nodeType = '';
    let childNodes = Array.prototype.filter.call(parentNode.childNodes, element => element.tagName);
    childNodes.forEach(element => {
         
        console.log(element.tagName.toUpperCase());
        if (element.firstChild) {
            consoAllNodeName(element);
        } else {

        }

    })
}

consoAllTagName(document);
复制代码

在这段代码中，由于 nodeList 类型并没有 filter 方法，使用 call 函数传入 nodelist 调用该方法。并且将 filter 的处理函数作为第二个参数。

下面这种方法是广度优先遍历。

function consoAllTagName(root){
  const queue = [root];
  while(queue.length) {
    const currentNode = queue.shift();
    const {childNodes, tagName} = currentNode;
    if (tagName) {
      console.log(currentNode.tagName);
    } else {
    }
    Array.prototype.filter.call(childNodes, item=>item.tagName)
    .forEach(itemNode=>{
      queue.push(itemNode)
    })
  }
}
复制代码

这段代码中，通过解构赋值得到 childNodes 和 tageName 属性。