我需要从Shadow DOM中获取元素并进行更改。我该怎么办?
<div> <input type="range" min="100 $" max="3000 $"> </div>
这是一个例子:
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);
演示:
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>
我希望这能帮到您。