javascript - 从 document.importNode 获取元素？

Question

我有一个模板，我正在通过 document.importNode 进行迭代克隆。我不能做的是向克隆的元素添加一个类。

var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
document.querySelector('#target').appendChild(clone);
clone.classList.add('glyphicon glyphicon-search'); // error thrown here, classList is undefined

究竟什么是克隆节点？控制台说它是#document-fragment。如何在不使用 querySelector 和索引克隆节点的情况下从克隆中获取创建的元素？

模板看起来像这样:

<template id="template">
    <div class="row">
        <div class="col-xs-3 no"></div>
        <div class="col-xs-6 no2"></div>
        <div class="col-xs-3 quantity"></div>
    </div>
</template>

Answer 1

克隆 <template>的内容确实会给你一个文档片段。这不是附加到 DOM 的元素，而是包含一组 DOM 元素的轻量级包装器 - 因此它没有像 classList 这样的属性。 .

您必须查询文档片段的内容，在将其附加到 DOM 之前，如下所示:

var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
// Make any modifications to the clone now
clone.querySelector(".row").classList.add('glyphicon', 'glyphicon-search');
//                          ^^ Note the corrected syntax for classList.add too
document.querySelector('#target').appendChild(clone);

<template id="template">
    <div class="row">
        <div class="col-xs-3 no">No</div>
        <div class="col-xs-6 no2">No2</div>
        <div class="col-xs-3 quantity">Qty</div>
    </div>
</template>
<div id="target">
    
</div>

产生以下标记:

<div id="target">
    <div class="row glyphicon glyphicon-search">
        <div class="col-xs-3 no">No</div>
        <div class="col-xs-6 no2">No2</div>
        <div class="col-xs-3 quantity">Qty</div>
    </div>
</div>