getElementsByClassName 不起作用，但 id 工作正常

Question

我正在尝试通过类名获取一些元素，但它不起作用。但是，如果我更改为按 ID 获取元素，它可以正常工作。想了解为什么类名方法不起作用。 下面是一个JSFiddle：http://jsfiddle.net/kXmpY/2681/如果我更改为 ID，它可以工作。我错过了什么？

.HTML：

<a href="#" class="cloneLink">Click me</a>
<div class="duplicator"> 
<label for="newInput">Label</label>
<input type="text">
</div>

.JS：

document.getElementsByClassName("cloneLink").onclick = duplicate;
var i = 0;
var original = document.getElementsByClassName("duplicator");
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicator" + i++; // there can only be one element with 
an ID
original.parentNode.appendChild(clone);
}

Answer 1

document.getElementsByClassName 返回一个HTMLCollection而不是单个元素。

你需要写

var original = document.getElementsByClassName("duplicator")[0];

也就是说，如果你有一个元素，具有你想要操作的类名。

getElementsByClassName(( 方法返回具有所有给定类名的所有子元素的类似数组的对象。

在此处阅读有关此内容的更多信息

Answer 2

document.getElementsByClassName 将返回一个名为HTMLCollection的类似对象的数组。为了使代码正常工作，您需要确保其长度大于零，然后访问元素并附加事件。

let elements = document.getElementsByClassName("cloneLink");
if(elements.length){
elements.forEach( element => element.addEventListener("click" , duplicate))
}