javascript - 影子 DOM 中的 JQuery 选择元素

Question

HTML代码:

<textarea name="remark" rows="4" cols="30">
  #shadow-root (user-agent)
  <div id="inner-editor">
    "this is text in textarea"
  </div>
</textarea>

我正在尝试使用此 JQuery 使用 id="inner-editor" 选择元素 DIV:

var el = $("[name='remark']").children();

但是 var el 是空的。如果我尝试这样做:

$("[name='remark']").text();

也是空输出。

#shadow-root (user-agent) 类似于模板(我不知道它到底是什么)并且不显示在文本区域中

是否可以在textarea元素中选择这个元素DIV？

Answer 1

我不太明白你的例子，但我猜你在隐藏 <div id="inner-editor">在 <textarea name="remark" rows="4" cols="30"> 的阴影根中.

您需要选择 <textarea name="remark" rows="4" cols="30">在那里你可以通过 shadowRoot 访问元素的 Shadow Root javascript 属性。

完整示例:

var el = $("[name='remark']").shadowRoot.getElementById("inner-editor");

编辑:使用 Jquery，根据您的问题，您需要将 shadowRoot 传递给 Jquery。它也应该与 Jquery 一起工作:

var sr = $("[name='remark']").shadowRoot;
var el = $(sr).find("#inner-editor");