普通的Javascript代码，可以执行querySelector()和querySelectorAll()的工作，包括shadowroots [英] Plain Javascript code that does what querySelector() and querySelectorAll() does, include shadowroots
问题描述
我正在尝试编写一种方法，该方法包含两个参数:当前元素的parentNode之一，其中许多具有阴影根的childNodes，第二个参数是其中一个的阴影根之一内的元素的ID.此parentNode参数的childNodes.我尝试使用JS附带的通用querySelector()方法来单独使用id查找元素，但是由于我的element标签位于shadowroot中，因此无法使用.由于这个原因，我编写的代码或多或少都经过了硬编码，并通过它们的标记名遍历了DOM树，因此，我想到了编写一种处理匹配的更具动态性的方法的想法.这是我正在处理的html示例，使用了一堆自定义的Web组件标签(因此，为什么是shadowroots):
I am trying to write a method that takes in two params: one of the parentNode of the current element where many childNodes with shadowroots within it, the second param being the id of an element within one of the shadowroots of one of the childNodes of this parentNode param. I tried to use the generic querySelector() methods that JS come with to find the element using the id alone, but it wouldn't work due to my element tags being inside the shadowroot. Due to this reason, I had write code that are more or less hard-coded that traverse through the DOM tree by their tag name, hence the idea of writing a more dynamic method that handles the matching. Here is an html sample of what I am dealing with, using a bunch of customized web components tags (Hence why the shadowroots):
<body>
<my-app>
<main id="main">
<my-app-pub>
<section>
<my-app-workpackage id="wp">
<my-table id="mytable1" data={...}>
#shadow-root (open)
<style></style>
<table>
<thead></thead>
<tbody>
<tr id="tr1"></tr>
<tr id="tr2"></tr>
<tr id="tr3"></tr>
</tbody>
</table>
</my-table>
<my-table id="mytable2" data={...}>
#shadow-root (open)
<style></style>
<table>
<thead></thead>
<tbody>
<tr id="tr4"></tr>
<tr id="tr5"></tr>
<tr id="tr6"></tr>
</tbody>
</table>
</my-table>
</my-app-workpackage>
</section>
</my-app-pub>
</main>
</my-app>
假设我有一个变量，其父元素为<my-app-workpackage>，而我要查找的元素的ID为tr2，我该如何编写一种方法来处理呢?
Giving that I have a variable with the parent element <my-app-workpackage>, and the id of the element I want to find as tr2, how should I write a method to handle that?
推荐答案
您必须创建一个解析器，该解析器将递归检查DOM:
You must create a parser that will check recursively the DOM :
对于每个节点:
- 如果存在Shadow DOM(
shadowRoot而不是null)，请解析Shadow树. - 或者解析子DOM树.
- If there's a Shadow DOM (
shadowRootnotnull), parse the Shadow tree. - Or else parse the children DOM tree.
如果您使用<slot>，您也会查找分布式节点，但您的问题中没有询问...
If you use <slot> you'll have look for distributed nodes too, but it's not asked in your question...
这篇关于普通的Javascript代码，可以执行querySelector()和querySelectorAll()的工作，包括shadowroots的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
