getElementsByClassName не работает, но Id работает нормально

Question

Я пытаюсь получить некоторые элементы по имени класса, и это не работает.Тем не менее, если я изменил, чтобы получить элемент по идентификатору, он работает нормально.Хотелось бы понять, почему метод 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 вместо одного элемента.

Вам необходимо написать

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))
}