获取网页中所有自定义元素（包括 Shadow DOM 中的元素）

本文介绍了如何使用 JavaScript 获取网页中所有自定义元素，包括那些位于 Shadow DOM 中的元素。通过递归遍历 DOM 树，并结合 document.querySelectorAll 和 Element.shadowRoot 属性，可以有效地找到所有自定义元素，并将其存储在数组中。本文提供了详细的代码示例和注意事项，帮助开发者轻松实现这一功能。

在现代 Web 开发中，自定义元素（Custom Elements）的使用越来越广泛。然而，有时我们需要获取页面中所有的自定义元素，包括那些被封装在 Shadow DOM 中的元素。传统的 document.querySelectorAll('*') 方法无法穿透 Shadow DOM，因此我们需要采用一种更有效的方法。

递归遍历 DOM 树

解决这个问题的一种常见方法是递归遍历 DOM 树，检查每个节点是否为自定义元素，并递归地进入 Shadow DOM（如果存在）。

以下是一个示例代码，展示了如何实现这一功能：

function getAllCustomElements(root = document) {
  const customElements = [];

  function traverse(node) {
    // 检查是否为自定义元素 (使用isConnected确保元素已连接到DOM)
    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.includes('-') && node.isConnected) {
      customElements.push(node);
    }

    // 遍历子节点
    for (const child of node.children) {
      traverse(child);
    }

    // 检查 Shadow DOM
    if (node.shadowRoot) {
      traverse(node.shadowRoot);
    }
  }

  traverse(root);
  return customElements;
}

// 调用函数获取所有自定义元素
const allCustomElements = getAllCustomElements();
console.log(allCustomElements);

代码解释：

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

1. getAllCustomElements(root = document) 函数接收一个可选的 root 参数，默认为 document，表示从哪个节点开始遍历。
2. customElements 数组用于存储找到的自定义元素。
3. traverse(node) 函数是一个递归函数，用于遍历 DOM 树。
4. 在 traverse 函数中，首先检查当前节点是否为元素节点 (node.nodeType === Node.ELEMENT_NODE)，并且其标签名是否包含 - (表示是自定义元素，使用 node.tagName.includes('-') 判断), 并且该元素已连接到 DOM (node.isConnected)。如果是，则将其添加到 customElements 数组中。
5. 然后，遍历当前节点的所有子节点 (node.children)，并递归调用 traverse 函数。
6. 最后，检查当前节点是否存在 Shadow DOM (node.shadowRoot)。如果存在，则递归调用 traverse 函数来遍历 Shadow DOM。

更简洁的写法

可以使用 querySelectorAll 和 Element.shadowRoot 来更简洁地实现相同的功能：

function getAllCustomElements(root = document) {
  const customElements = [];

  function traverse(node) {
    // 使用 querySelectorAll 查找所有可能的自定义元素
    const elements = node.querySelectorAll(":defined"); //":defined" 选择器选择所有已定义的元素，包括自定义元素

    elements.forEach(element => {
      if (element.tagName.includes('-') && element.isConnected) { // 再次确认是否是自定义元素并且已连接到DOM
          customElements.push(element);
      }
    });

    // 遍历 Shadow DOM
    elements.forEach(element => {
      if (element.shadowRoot) {
        traverse(element.shadowRoot);
      }
    });
  }

  traverse(root);
  return customElements;
}

const allCustomElements = getAllCustomElements();
console.log(allCustomElements);

注意事项：

• 性能：递归遍历 DOM 树可能会比较耗时，特别是对于大型页面。在性能敏感的场景下，需要考虑优化算法。
• isConnected 属性：确保元素已连接到 DOM，避免处理未连接的元素。
• :defined 选择器： :defined 选择器选择所有已定义的元素，包括自定义元素。这可以减少需要遍历的元素数量。
• Shadow DOM 穿透： 只有在 JavaScript 中才能访问 Shadow DOM。

总结：

通过递归遍历 DOM 树并结合 document.querySelectorAll 和 Element.shadowRoot 属性，我们可以有效地获取网页中所有自定义元素，包括那些位于 Shadow DOM 中的元素。在实际开发中，可以根据具体需求选择合适的实现方式，并注意性能优化。

以上就是获取网页中所有自定义元素（包括 Shadow DOM 中的元素）的详细内容，更多请关注php中文网其它相关文章！