web-dev-qa-db-ja.com

getElementsByClassNameで現在の要素を取得する方法

の簡単なJSイベントを考えてみましょう

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

このコードを拡張して、class="test"を含むすべての要素で一般的に機能するようにするにはどうすればよいですか。要素をクリックして、そのコンテンツを置き換えることを意味します。実際、クリックイベントからノード番号（括弧内に提供）を取得する必要があります。

JQueryのような実用的な方法ではなく、邪魔にならないコードでJavaScriptをよりよく理解しようとしています。

javascriptjavascript-eventsunobtrusive-javascriptgetelementsbyclassname
11
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() { ... }の代わりに(function(i) { return function() { ... }; })(i)を使用しました。コールバックでiを使用した場合、iの値は、呼び出すときにelements.length - 1になるためです。これを修正するには、iをシャドウイングし、本質的に値渡しにする必要があります。

16
Blender

関数内で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が追加する膨張なしで、それは大幅に速くなります;）

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

しかし、addEventListener（またはIEやOperaの一部のバージョンではattachEvent）を使用することをお勧めします。

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