javascript - 从 Shadow DOM 获取元素

Question

在我正在处理的一个项目中，我有一个 HTML 文档，该文档是通过应用程序生成的，随后传递给将 HTML 转换为 PDF 的函数。

在 HTML 中，我有文本区域来显示可编辑的信息。当用户编辑当前位于文本区域中的信息时，我想保存该信息，以便在将其传递给 PDF 生成器时，它是 DOM 的最新版本。

经过一些测试，我发现文本区域内容的编辑版本在 Shadow DOM 中。

有没有办法获取该内容并将其放入实际的 DOM 中？

我没有做任何明确将内容放在那里的事情，但使用 Firebug 和 WebInspector 我可以将其视为影子内容。

Answer 1

您可以使用<textarea> 获取当前值的 value 属性并通过其 .textContent 将其放入 DOM 中属性:

function f() {
  var t = document.getElementById('t');
  t.textContent = t.value;
  alert("The resulting DOM is: " + t.parentNode.innerHTML);
}

<div>
  <textarea id = "t">test</textarea>
</div>
<button onclick="f()">click</button>

...假设您调用的函数确实从页面的 DOM 中读取了它的输入。这是什么图书馆？