写一个方法获取页面中所有类型的节点数

在前端开发中,你可以使用JavaScript的DOM API来获取页面中所有类型的节点数。下面是一个示例方法,它使用递归函数来遍历DOM树并计算不同类型的节点数量:

function getNodeTypeCounts() {
  const counts = {
    ELEMENT_NODE: 0,
    ATTRIBUTE_NODE: 0,
    TEXT_NODE: 0,
    CDATA_SECTION_NODE: 0,
    ENTITY_REFERENCE_NODE: 0,
    ENTITY_NODE: 0,
    PROCESSING_INSTRUCTION_NODE: 0,
    COMMENT_NODE: 0,
    DOCUMENT_NODE: 0,
    DOCUMENT_TYPE_NODE: 0,
    DOCUMENT_FRAGMENT_NODE: 0,
    NOTATION_NODE: 0,
  };

  function traverse(node) {
    // 增加对应节点类型的计数
    counts[node.nodeType] += 1;

    // 遍历子节点
    const children = node.childNodes;
    for (let i = 0; i < children.length; i++) {
      traverse(children[i]);
    }
  }

  // 从document开始遍历
  traverse(document);

  return counts;
}

// 使用示例
const nodeCounts = getNodeTypeCounts();
console.log(nodeCounts);

这个方法首先定义了一个counts对象,用于存储不同类型节点的数量。然后,它定义了一个名为traverse的递归函数,该函数接收一个节点作为参数,并增加对应节点类型的计数。接下来,它遍历该节点的所有子节点,并对每个子节点调用traverse函数。最后,从document节点开始调用traverse函数,以遍历整个DOM树。最终,该方法返回包含不同类型节点数量的counts对象。

请注意,在实际应用中,你可能更关注某些特定类型的节点(例如元素节点和文本节点),而不是所有类型的节点。在这种情况下,你可以根据需要修改counts对象和traverse函数来仅计算你感兴趣的节点类型。

另外,如果你使用的是现代前端框架(如React、Vue或Angular),它们可能提供了自己的工具或方法来操作和查询DOM树。在这些情况下,你可以考虑使用框架提供的API来完成类似的任务。

posted @   王铁柱6  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示