如何在 getElementsByClassName 中获取当前元素答案

【问题标题】：How to get current element in getElementsByClassName如何在 getElementsByClassName 中获取当前元素
【发布时间】：2012-06-20 00:11:25
【问题描述】：

考虑一个简单的JS事件

document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}

如何将此代码扩展为通常适用于具有class="test" 的所有元素。我的意思是让元素被点击并替换它的内容。其实我们需要从点击事件中获取节点号（括号内提供）。

我试图在不显眼的代码中更好地理解 Javascript，而不是像 jQuery 这样的实用方法。

【问题讨论】：

标签： javascript dom-events getelementsbyclassname unobtrusive-javascript

【解决方案1】：

只需遍历它们：

var elements = document.getElementsByClassName('test');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', (function(i) {
        return function() {
            this.innerHTML = 'New Text';
        };
    })(i), false);
}

我使用(function(i) { return function() { ... }; })(i) 而不仅仅是function() { ... }，因为如果你碰巧在回调中使用i，那么在你调用它时i 的值将是elements.length - 1。要修复它，您必须隐藏 i 并使其本质上按值传递。

【讨论】：

我想知道是否最好只定义一次函数，然后在循环的每次迭代中添加它的引用。我不确定浏览器是否足够智能，但它可能每次迭代都会创建一个匿名函数。

【解决方案2】：

var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].onclick=function(){
        this.innerHTML = 'New Text';
    }

但最推荐使用 addEventListener（或 attachEvent，在 IE/某些版本的 Opera 中，我猜）：

var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].addEventListener('click',function(){//If you're gonna use attachEvent, use 'onclick' instead of 'click'
        this.innerHTML = 'New Text';
    }});

【讨论】：

他在询问如何对类名为“test”的所有元素执行此操作，以及如何在javascript中获取被点击的元素[i]。不仅仅是将 innerHTML 设置为“新文本”

【解决方案3】：

只需在函数内部使用this。 this 将是触发事件的元素。

(function() {
    var elms = document.getElementsByClassName("test"),
        l = elms.length, i;
    for( i=0; i<l; i++) {
        (function(i) {
            elms[i].onclick = function() {
                this.innerHTML = "New Text";
            };
        })(i);
    }
})();

它比 jQuery 的要复杂一点：

$(".test").click(function() {
    $(this).html("New Text");
});

但是如果没有 jQuery 增加的臃肿，它会明显更快;)

【讨论】：

@Derek 这是一个有趣的观点！但为什么？ addEventListerner 不会覆盖以前的事件，但在 IE
onclick 非常好，只要您了解它带来的限制：如果您覆盖它，您将丢失任何现有的附加事件。
@Ali 好吧，你总是可以在 IE9attachEvent。