javascript - 如何从导入它的文档中查询选择器 html 导入中的元素？

Question

假设我有一个 html 文档，里面有这个 div :

div.html

  <div class="thediv">
    <h1>test</h1>
    <p class="insert"></p>
  </div>

从 index.html 导入

<link rel="import" href="/path/to/div.html">

现在如果我在控制台或脚本中输入

const div = document.querySelector('.thediv');

div 是 null，就好像 div 刚刚消失了。但我确信有一种方法可以选择元素，因为一些 webcomponents 库允许程序员通过文件定义他们自己的自定义元素。

我尝试了很多方法，但找不到解决方案。感谢您的帮助。

更新:
这适用于任何 HTML 元素(不仅仅是 div)。我只是为这个问题选择了一个例子。

Answer 1

您可以引用 document设置为 <link>带有 rel 的元素属性设置为 "import"使用 .import <link>的属性(property)元素，另见 Is there a way to know if a link/script is still pending or has it failed , How to append a whole html file with jquery

document.querySelector("link[rel=import][href='template1.html']")
.import.querySelector("#template1")