获取网页中所有自定义元素（包括Shadow DOM内的元素）-js教程-PHP中文网

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

聖光之護

发布： 2025-09-24 17:12:40

原创

390人浏览过

获取网页中所有自定义元素（包括shadow dom内的元素）

本文将介绍如何使用 JavaScript 获取网页中所有自定义元素，包括 Shadow DOM 中的元素。正如摘要所述，我们将采用递归遍历 DOM 树的方式，结合 document.querySelectorAll 方法，来提取所有自定义元素。

递归遍历 DOM 树

由于 Shadow DOM 的存在，简单的 document.querySelectorAll('*') 无法获取所有元素。我们需要编写一个递归函数来遍历整个 DOM 树，包括 Shadow DOM 内部的元素。

以下是一个示例代码：

function getAllCustomElements(root) {
  let customElements = [];

  // 获取当前节点下的所有元素
  const elements = root.querySelectorAll('*');

  elements.forEach(element => {
    // 检查是否是自定义元素
    if (element.tagName.includes('-')) {
      customElements.push(element);
    }

    // 检查是否有 Shadow DOM
    if (element.shadowRoot) {
      // 递归遍历 Shadow DOM
      customElements = customElements.concat(getAllCustomElements(element.shadowRoot));
    }
  });

  return customElements;
}

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

// 打印结果
console.log(allCustomElements);

登录后复制

代码解释：

千帆AppBuilder

百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。

174

查看详情

getAllCustomElements(root) 函数接收一个 DOM 节点作为根节点。
root.querySelectorAll('*') 获取根节点下的所有元素。
element.tagName.includes('-') 检查元素的标签名是否包含 -，这通常是自定义元素的特征。
element.shadowRoot 检查元素是否有 Shadow DOM。
如果有 Shadow DOM，则递归调用 getAllCustomElements 函数来遍历 Shadow DOM。
最后，将所有找到的自定义元素合并到一个数组中并返回。

使用示例

假设我们有以下 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <title>Custom Elements Example</title>
</head>
<body>
  <my-element>
    <shadow-host>
      #shadow-root
        <custom-in-shadow>
        </custom-in-shadow>
    </shadow-host>
  </my-element>

  <script>
    class MyElement extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const shadowHost = document.createElement('shadow-host');
        shadow.appendChild(shadowHost);

        const customInShadow = document.createElement('custom-in-shadow');
        shadowHost.appendChild(customInShadow);
      }
    }

    customElements.define('my-element', MyElement);
    customElements.define('custom-in-shadow', class extends HTMLElement {});

    function getAllCustomElements(root) {
      let customElements = [];

      // 获取当前节点下的所有元素
      const elements = root.querySelectorAll('*');

      elements.forEach(element => {
        // 检查是否是自定义元素
        if (element.tagName.includes('-')) {
          customElements.push(element);
        }

        // 检查是否有 Shadow DOM
        if (element.shadowRoot) {
          // 递归遍历 Shadow DOM
          customElements = customElements.concat(getAllCustomElements(element.shadowRoot));
        }
      });

      return customElements;
    }

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

    // 打印结果
    console.log(allCustomElements);
  </script>
</body>
</html>

登录后复制

运行上述代码后，控制台将输出一个包含 my-element 和 custom-in-shadow 两个元素的数组。

注意事项

性能： 递归遍历 DOM 树可能会影响性能，尤其是在大型页面上。可以考虑使用 Web Workers 来进行异步处理。
浏览器兼容性： Shadow DOM 的支持情况可能因浏览器而异。请确保目标浏览器支持 Shadow DOM。
自定义元素命名规范： 自定义元素的标签名必须包含 -，例如 my-element。

总结

通过递归遍历 DOM 树，并结合 document.querySelectorAll 方法，我们可以有效地获取网页中所有自定义元素，包括 Shadow DOM 中的元素。这种方法可以帮助开发者更好地理解和操作网页结构，为构建复杂的 Web 应用提供支持。请注意性能和浏览器兼容性问题，并根据实际情况进行优化。

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