如何在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方法

回答

相關問題