检查元素是否是影子内的根文档 dom

Question

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

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

正确的测试是什么？

我的情况是，我编写了一个 Chrome 扩展代码，它从给定元素执行 elem = elem.parentElement 到 elem===document.documentElement.[=14= 爬上 DOM 树]

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

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

Answer 1

elem.getRootNode() return 元素的根 Node。所以如果你在阴影DOM，elem.getRootNode() return 元素的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>

检查元素是否是影子内的根文档 dom

check if element is the root document inside shadow dom

html

javascript

dom

shadow-dom