本文介绍了如何使用 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);代码解释：
- getAllCustomElements(root = document) 函数接收一个可选的 root 参数，默认为 document，表示从哪个节点开始遍历。
- customElements 数组用于存储找到的自定义元素。
- traverse(node) 函数是一个递归函数，用于遍历 DOM 树。
- 在 traverse 函数中，首先检查当前节点是否为元素节点 (node.nodeType === Node.ELEMENT_NODE)，并且其标签名是否包含 - (表示是自定义元素，使用 node.tagName.includes('-') 判断), 并且该元素已连接到 DOM (node.isConnected)。如果是，则将其添加到 customElements 数组中。
- 然后，遍历当前节点的所有子节点 (node.children)，并递归调用 traverse 函数。
- 最后，检查当前节点是否存在 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 中的元素。在实际开发中，可以根据具体需求选择合适的实现方式，并注意性能优化。
