影子 DOM 中的 JQuery 选择元素答案

【问题标题】：JQuery select element in shadow DOM影子 DOM 中的 JQuery 选择元素
【发布时间】：2015-03-23 17:46:03
【问题描述】：

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 中

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

【问题讨论】：

Shadow DOM 怎么……？
投反对票，因为它不是影子 DOM

标签： javascript jquery html dom

【解决方案1】：

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

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

完整示例：

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

编辑： 使用 Jquery，根据您的问题，您需要将 shadowRoot 传递给 Jquery。它也应该适用于 Jquery：

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

【讨论】：

对我来说影子根属性返回未定义
经过测试我发现把这个工作： var sr = $("[name='remark']")[0].shadowRoot;

【解决方案2】：

这对我来说可以在 Shadow 根中选择一个元素。我已将其转换为您的场景。

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

希望这可以帮助某人。

【讨论】：

【解决方案3】：

复制 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>

【讨论】：

in fiddle is #shadow-root (user-agent) -> 只有文本，在网页上是类似“模板”的东西，而 JQUERY 选择器不会从这个 #shadow-root (user-agent) 中选择任何内容 -> 包括：<div id="inner-editor"></div>跨度>
你在html中写#shadow-root，而问题询问浏览器自动创建的#shadow-root