Question

我定义了2个导入。

index.html

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8" />
    <title>Imports test</title>
    <link rel="import" href="./import1.html" />
    <link rel="import" href="./import2.html" />
    <script src="./scripts.js"></script>
</head>

<body>
    <script>
        loadImport('import1');
        loadImport('import2');
    </script>
</body>
</html>

import1.html

<div class="import1">
    Import 1
</div>

import2.html

<div class="import2">
    Import 2
</div>

scripts.js

function loadImport(name) {
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    var el = content.querySelector('.' + name);

    document.body.appendChild(el.cloneNode(true));
}

只有第一次导入才能正常工作。 content.querySelector()的结果是null秒。如果我在index.html中评论第一个导入，则第二个导入有效。我做错了什么？铬浏览器版本75.0.3770.100。

Answer 1

您使用了错误的选择器-document.querySelector()将仅返回找到的第一个匹配项-这就是为什么您的代码适用于第一个匹配项而不适用于第二个匹配项的原因-它仅匹配第一个匹配项。

>

var link = document.querySelector('link[rel="import"]');

您需要使用document.querySelectorAll()，然后遍历它们以访问它们（这意味着您实际上可以只调用一次import函数）

var links = document.querySelectorAll('link[rel="import"]');

或使用索引仅获取所需的导入-即第二个导入链接

 var links = document.querySelectorAll('link[rel="import"]');
 var link = links[1]

无法从第二次导入中选择查询

1 个答案: