提问人：Googlebot 提问时间：6/18/2012 最后编辑：Brian Tompsett - 汤莱恩Googlebot 更新时间：9/12/2020 访问量：51330
如何在getElementsByClassName中获取当前元素
How to get current element in getElementsByClassName
问：
考虑一个简单的 JS 事件
document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}
如何扩展此代码以通常适用于所有带有 .我的意思是点击元素并替换其内容。事实上，我们需要从 click 事件中获取节点号（在括号内提供）。class="test"
我试图在不显眼的代码中更好地理解 Javascript，而不是像 jQuery 这样的实用方法。
答：
2赞
Danilo Valente
6/18/2012
#1
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';
}});
评论
0赞
gabeio
6/18/2012
他正在询问如何对类名为“test”的所有元素执行此操作，以及如何在 javascript 中获取被点击的元素。不仅仅是将innerHTML设置为“新文本”[i]
4赞
Niet the Dark Absol
6/18/2012
#2
只需在函数内部使用即可。 将是触发事件的元素。thisthis
(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添加的臃肿，它会大大加快;)
评论
0赞
Googlebot
6/18/2012
@Derek这是一个有趣的观点！但是为什么？ 不会覆盖以前的事件，但在 IE<9 中不受支持。我错过了什么优势吗？addEventListerner
0赞
Niet the Dark Absol
6/18/2012
onclick完全没问题，前提是您了解它带来的限制：如果覆盖它，则会丢失任何现有的附加事件。
0赞
Derek 朕會功夫
6/18/2012
@Ali 好吧，您始终可以在 IE9< 或 jQuery 中使用。attachEvent
16赞
Blender
6/18/2012
#3
只需遍历它们：
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() { ... }iielements.length - 1i
评论
0赞
Camilo Martin
6/17/2013
我想知道定义一次函数，并在循环的每次迭代中添加其引用是否更好。我不确定浏览器是否足够智能，但它可能在每次迭代中创建一个匿名函数。
评论