Question

HTML code：

<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中

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

Answer 1

我真的没有得到你的榜样，但我想你是在<div id="inner-editor">的暗影根中隐藏<textarea name="remark" rows="4" cols="30">。

您需要选择<textarea name="remark" rows="4" cols="30">，然后您可以通过shadowRoot javascript属性访问该元素的影子根。

完整示例：

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

修改使用Jquery，根据您的问题，您需要将shadowRoot传递给Jquery。它也适用于Jquery：

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

Answer 2

复制你的html和js代码后它可以正常工作。请查看fiddle

确保包括jquery.min.js

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

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>      
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>

<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
alert($("[name='remark']").text());
});
//]]>      
</script>  

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

Answer 3

这对我在 Shadow 根中选择一个元素很有用。我已将其转换为您的方案。

let textArea = $("textarea[name='remark']"); 
let sr = $(textArea)[0].shadowRoot; 
console.log($(sr).find('.#inner-editor'));

希望这可以帮助某人。

在DOM DOM中的JQuery select元素

3 个答案: