从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>