javascript - 如何克隆具有给定类名的元素

Question

当我需要克隆 div 元素时，我正在使用 getElementById。

代码:

printHTML( document.getElementById("div_name").cloneNode(true));

现在我需要使用 getElementsByClassName

使用 getElementsByClassName 时，CloneNode 不工作。我怎样才能在这里输入类名？

谢谢

编辑:

当我尝试使用它时:

printHTML( $('.dataTables_scroll').clone(true) );

你可以看到我的功能:

function printHTML(clonedDive){
        var iframe = document.createElement("iframe");
        document.body.appendChild(iframe);
        iframe.contentWindow.onunload = function(){
        $(".DTTT_container").show("fast");
        $("#header_outer").show("fast");
        $(".ColVis.TableTools").show("fast");
        $("#footer").show("fast");
     };
      iframe.contentWindow.document.body.appendChild(clonedDive);
      iframe.contentWindow.print();

      document.body.removeChild(iframe); 
}

我在这一行中遇到错误:

iframe.contentWindow.document.body.appendChild(clonedDive);

这是一个错误描述:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

Answer 1

getElementsByClassName 获取一个节点列表，或者如果您愿意，可以获取一个包含元素的类似数组的对象，因为可以有多个元素具有相同的类。

getElementsByClassName 执行此操作，即使只有一个元素与类匹配。
一般可以认出getElements中的s这样的方法，就是获取多个元素，即一个nodeList。

getElementById 仅获取一个元素，因为 ID 是唯一的。

要获取节点列表中的第一个元素，请使用方括号表示法，如下所示:

document.getElementsByClassName("div_name")[0].cloneNode(true);

或者可以使用querySelector，它只获取第一个匹配的元素

document.querySelector(".div_name").cloneNode(true);

jQuery 解决方案是:

$('.div_name').clone(true);

要遍历具有特定类名的元素，您将使用循环

var elems = document.getElementsByClassName("div_name");

for ( var i=0; i<elems.length; i++ ) {
    printHTML( elems[i].cloneNode(true) );
}