如何在getElementsByClassName方法

获得当前元素考虑的如何在getElementsByClassName方法

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

一个简单的JS事件如何延长这段代码通常与class="test"所有元素的工作。我的意思是让点击元素并替换它的内容。实际上，我们需要从click事件中获取节点号（在括号内提供）。

我想更好地理解JavaScript中不显眼的代码，而不是一个实用的方法，如jQuery。

来源

2012-06-18 Googlebot

就在它们之间迭代：

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() { ... }因为如果你hap笔在回调中使用i，在您调用它时，i的值将为elements.length - 1。为了解决这个问题，你必须对i产生影响，并使其实质上按照价值传递。

来源

2012-06-18 00:26:58 Blender

我不知道定义一次函数会不会更好，只需在循环的每次迭代中添加它的引用即可。我不确定浏览器是否足够聪明，但它可能会在每次迭代时创建一个匿名函数。 –

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

但它最值得推荐使用的addEventListener（或的attachEvent，在IE /歌剧的一些版本，我猜）：

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

来源

2012-06-18 00:24:37

他问的是如何为所有类名为'test'的元素以及如何在javascript中获取被单击的元素'[i]'。不只是将innerHTML设置为'New Text' – gabeio

只需使用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的添加膨胀速度更快;）

来源

2012-06-18 00:24:56

IMO'addEvntListener'优于'onclick' .. –

@Derek这是一个有趣的观点！但为什么？ 'addEventListerner'不覆盖以前的事件，但IE <9不支持。有没有我错过的优势？ – Googlebot

'onclick'完全正常，只要你明白它带来的限制：如果覆盖它，你将失去现有的附加事件。 –

如何在getElementsByClassName方法

回答

相关问题