使用getElementsByClassName无效，但getElementById正常，求助排查原因

嘿，我来帮你理清这个问题——你遇到的核心问题是对这两个DOM方法的返回值类型理解有误！

核心区别：返回值类型完全不同 #

• getElementById() 会直接返回匹配到的单个DOM元素对象（如果页面中存在对应ID的元素），所以你直接给它绑定onclick事件、调用cloneNode()方法都是直接在目标元素上操作，自然能正常生效。
• getElementsByClassName() 返回的是一个HTMLCollection——这是一个类数组的集合对象，哪怕页面里只有一个匹配类名的元素，它也会把这个元素放进集合里返回，而不是直接返回元素本身。

你的代码里的具体问题 #

我们逐行看问题所在：

1. 绑定点击事件时：
   原代码document.getElementsByClassName("cloneLink").onclick = duplicate;是给集合对象绑定事件，而不是给里面的<a>元素绑定，集合本身并没有onclick属性，所以点击事件完全不会触发。你需要从集合里取出对应的元素，比如用索引[0]定位第一个匹配元素：

   document.getElementsByClassName("cloneLink")[0].onclick = duplicate;
   

2. 获取克隆模板时：
   var original = document.getElementsByClassName("duplicator");得到的是集合对象，后面调用original.cloneNode(true)会直接报错——因为集合没有cloneNode这个DOM元素方法。同样要取出集合里的第一个元素：

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

修正后的完整JS代码 #

document.getElementsByClassName("cloneLink")[0].onclick = duplicate;
var i = 0;
var original = document.getElementsByClassName("duplicator")[0];
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);
}

额外小提示 #

如果是现代浏览器，更推荐用document.querySelector(".cloneLink")来获取单个元素——它支持CSS选择器语法，返回匹配到的第一个元素，用法更灵活直观，也能避免类数组集合带来的操作误区。

内容的提问来源于stack exchange，提问作者user1898404