个人中心
gpt4 book ai didi

javascript - 检查 element 是否是 Shadow dom 中的根文档

转载 作者：行者123 更新时间：2023-12-01 02:47:49 24 4
gpt4 key购买 nike

如何检查影子 DOM 内的元素，该元素本身是否是影子根？

我尝试了 if (elem===elem.getRootNode()) 但这不起作用，因为一个是元素，一个是节点。

什么是正确的测试？

我的情况是，我编写了一个 Chrome 扩展程序，该扩展程序从给定元素爬上 DOM 树，执行 elem = elem.parentElement 直到 elem===document.documentElement >.

我现在正在尝试扩展上述测试条件以适用于 Shadow DOM 内的元素。当从 Shadow DOM 中的元素向上爬时，我希望在到达 Shadow DOM 的根而不是整个页面的根时结束。

我只需要一个 Chrome 解决方案。

最佳答案

elem.getRootNode() 返回元素的根Node。因此，如果您位于 Shadow DOM 中，elem.getRootNode() 返回元素的 ShadowRoot 节点。

您可以简单地通过元素的类型检查该元素是否为 ShadowRoot。

elem instanceof ShadowRoot

这里是一个搜索根函数的示例。无用，因为有 getRootNode，仅用于演示。

function findShadowRoot(element){
  if(element instanceof ShadowRoot) return element;
  if(!element.parentNode) return null;
  return findShadowRoot(element.parentNode);
}

var shadow = document.querySelector('#element-hote').attachShadow({mode: "open"});
shadow.innerHTML = '<p><span id="inner">Inner shadow text!</span></p>';
var inner = shadow.querySelector('#inner');
console.dir(inner.getRootNode().innerHTML)
console.dir(findShadowRoot(inner).innerHTML);
console.log(inner.getRootNode() == findShadowRoot(inner))
<html>
  <head></head>
  <body>
    <p id="element-hote"></p>
  </body>
</html>

关于javascript - 检查 element 是否是 Shadow dom 中的根文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47149320/

24 4 0
文章推荐： Richfaces 3.3.3 IE9 问题
文章推荐： python - 与 JIRA python 连接时出现问题
文章推荐： linq - LINQ to SQL 中的括号表达式
文章推荐： jquery - AjaxForm 清除文件输入元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com