getElementsByClassName 不工作，但 Id 工作正常

Question

我试图通过 Class 名称获取一些元素，但它不起作用。但是，如果我更改为按 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 将 return 一个名为 HTMLCollection 的类似对象的数组。为了让您的代码正常工作，您需要确保其长度大于零，然后访问元素并附加事件。

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

Answer 2

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

你需要写

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

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

The getElementsByClassName() method returns an array-like object of all child elements which have all of the given class names.

阅读更多相关内容here

getElementsByClassName 不工作，但 Id 工作正常

getElementsByClassName is not working, but Id's work fine

getelementsbyclassname

clonenode