如何克隆具有给定类名的元素答案

【问题标题】：How to clone element with given class name如何克隆具有给定类名的元素
【发布时间】：2012-12-04 13:49:20
【问题描述】：

当我需要克隆 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

【问题讨论】：

为什么当你使用 getElement 时它被标记为 jQuery...？ jQuery 解决方案很简单，但不使用这些函数。
当您使用并要求我们使用原生 DOM 方法时，为什么要标记 jquery？
查看更新后的问题
由于您已经在项目中包含了 jQuery，我建议您使用 jQuery 按类名获取元素，因为 IE 直到版本 9 才支持原生 getElementsByClassName：quirksmode.org/dom/w3c_core.html#fivemethods跨度>

标签： javascript jquery html dom clone

【解决方案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) );
}

【讨论】：

我在这一行仍然遇到同样的错误：iframe.appendChild(clonedDive);
我删除了我的编辑，因为你所做的似乎对我有用 -> FIDDLE

【解决方案2】：

由于getElementsByClassName返回的是一个对象的数组，所以必须使用for循环在它们之间进行迭代，如下：

 for (i = 0; i < document.getElementsByClassName("div_name").length; i++){  

printHTML( document.getElementsByClassName("div_name")[i].cloneNode(true));
}

否则，如果你知道你拥有的元素的索引，我们就说 1

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

【讨论】：

它现在是一个循环，但你并没有真正有使用循环！如果只有一个元素，或者针对具有特定索引的元素，则不需要循环。
@adeneo 如果您针对单个元素，使用getElementsByClassName 是没有用的。这可能就是为什么@sємsєм 假设document.getElementsByClassName("div_name") 会返回一个数组。定位单个元素时，为该元素指定 ID 并使用 getElementById 会更快
@RobinvanBaalen - 你不明白，即使页面包含多个具有相同类的元素，你也可以使用 JS 定位单个元素，然后循环不会有多大好处。 getElementsByClassName 总是返回一个节点列表，所有带有“s”的方法，如 getElementsByTagName 等。
@adeneo 我确实明白了，我知道即使您使用以getElement**s** 开头的方法，您也可以定位单个元素。但我说的是速度和最佳实践。如果您使用getElementsByClassName 定位单个元素，那么即使您只需要一个，Javascript 也会遍历所有这些元素。因此，如果可能，最好使用针对单个元素的方法。当然，也有不适用的情况。
@RobinvanBaalen - 同意，当定位单个元素时，ID 总是更好，我要说的唯一一点是你没有必须使用 for 循环，这取决于，并且使用循环并不总是必要的，这也不是真正的答案，但上面写着“返回对象的数组”的那一行才是问题的真正意义所在。

【解决方案3】：

这不起作用？：

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

【讨论】：

【解决方案4】：

您可以循环遍历元素并一个一个克隆...

var e = document.getElementsByClassName('div');
for (var i = 0; i < e.length; i += 1) {
    // Clone e[i] here
    console.log(e[i].cloneNode(true));
}

【讨论】：