如何使用JavaScript获取影子根中的元素？ [英] How to get element in shadow root with JavaScript?

问题描述

我需要从Shadow DOM获取元素并对其进行更改。我可以怎么做？

 < div> 
< input type =rangemin =100 $max =3000 $> 
< / div> 
  

解决方案

这是一个例子：
$ b

  var container = document.querySelector（'＃example'）; 
 //创建影子根！ 
 var root = container.createShadowRoot（）; 
 root.innerHTML ='< div>根< div class =test>阴影中的元素< / div>< / div>'; 
 
 //访问阴影内的元素！ 
 //\"container.shadowRoot代表元素上托管的最年轻的影子根！ 
 console.log（container.shadowRoot.querySelector（。test）。innerHTML）; 
  

演示：

var container = document.querySelector（'＃example'）; // Create shadow root！var root = container.createShadowRoot（）; root.innerHTML ='< div>根< div class =test>阴影中的元素< / div>< / div>; //访问shadow！控制台内的元素。 log（container.shadowRoot.querySelector（。test）。innerHTML）;

 < div id =example> Element< / div>  

我希望这会帮助你。

I need get elements from Shadow DOM and change it. How i can do it?

<div>
     <input type="range" min="100 $" max="3000 $">
</div>

解决方案

Here is an example:

var container = document.querySelector('#example');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = '<div>Root<div class="test">Element in shadow</div></div>';

//Access the element inside the shadow !
//"container.shadowRoot" represents the youngest shadow root that is hosted on the element !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

Demo:

var container = document.querySelector('#example');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = '<div>Root<div class="test">Element in shadow</div></div>';

//Access the element inside the shadow !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

<div id="example">Element</div>

I hope this will help you.

这篇关于如何使用JavaScript获取影子根中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！