Javascript 如何在html模板中获取元素？

我正在开发一个

Electron

应用程序，其中

index.html

导入一个

search.html

：

<link rel="import" href="search.html">

第一个日志的输出是预期的，但是

searchBtn

的第二个日志总是null

我的代码有问题吗？如果是这样，如何正确获取模板html中的元素

结果如下：

我注意到模板中有一个

文档片段

。

尝试如下：

// parse you HTML first
var html = link.import.querySelector('template');
var parser = new DOMParser();
var doc = parser.parseFromString(html.content, "application/xml");

//later
var searchBtn = doc.querySelector('#searchBtn');  
console.log(searchBtn);

---

在templates

content

属性上运行

querySelector

函数

var link = document.querySelector('link[rel="import"][href="search.html"]');
var templateContent = link.import.querySelector('template');
console.log(templateContent);
var searchBtn = templateContent.content.querySelector('#searchBtn');  
console.log(searchBtn);

更多关于

更多关于

---

工作

日志显示

内容

是

模板

，其中有一个

文档片段

。您可以设置演示页面吗？也许在代码笔上？可能会有帮助，

doc

是空的。它现在可以工作了。似乎我们应该通过

content

属性访问文档片段。我现在遇到了事件绑定问题：

var link = document.querySelector('link[rel="import"][href="search.html"]');
var templateContent = link.import.querySelector('template');
console.log(templateContent);
var searchBtn = templateContent.content.querySelector('#searchBtn');  
console.log(searchBtn);