getelementsbyclassname - getElementsByClassName 不起作用，但 Id 工作正常

Question

我正在尝试按类名获取一些元素，但它不起作用。但是，如果我更改为通过 ID 获取元素，它可以正常工作。想了解为什么 Class Name 方法不起作用。这是一个 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. 要使您的代码正常工作，您需要确保其长度大于零，然后访问元素并附加事件。

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

Answer 2

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

你需要写

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

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

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

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