Javascript 如何在GetElementsByCassName中获取当前元素

考虑一个简单的JS事件

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

如何使用

class=“test”

扩展此代码，使其通常适用于所有元素。我的意思是点击元素并替换其内容。事实上，我们需要从click事件中获取节点号（在括号内提供）

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

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

对于（var i=0；i只需在函数内部使用
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添加的膨胀，它的速度会显著加快；）
只需迭代它们：

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

var elements=document.getElementsByClassName（'test'）；
对于（var i=0；i

我使用了
（函数（I）{return function（）{…}；}）（I）
而不仅仅是
function（）{…}
，因为如果在回调中碰巧使用
I
，
I
的值在调用它时将是
elements.length-1
。要修复它，您必须对
i
进行阴影处理，并使其基本上按值传递。
他询问如何对所有类名为“test”的元素执行此操作，以及如何在javascript中获取单击的元素
[i]
。不仅仅是将innerHTML设置为“newtext”@Derek这是一个有趣的观点！但是为什么呢
AddEventListener
不会覆盖以前的事件，但IE中不支持它
onclick
非常好，只要您理解它所带来的限制：如果您覆盖它，您将丢失任何现有的附加事件。@Ali好的，您可以在IE9

中始终使用

attachEvent

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

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

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