javascript - html dom 編集/属性/関数の追加

Question

私はhtmlでこのようなものを持っています

<div class="change"><div>
<div class="change"><div>
<div class="change"><div>
<div class="change"><div>

ここで、Javaスクリプトに進みます

var base = document.getElementsByClassName("change");
base[0].setAttribute();
console.log(base[0]);

コンソールから、オブジェクトを取得していることがわかりますが、この方法で編集することはできません。属性を編集/追加する他の可能性はありますか (100 個の要素を好きになるには onclick 関数を追加する必要があります)。かなり難しいです。 document.getElementById でより高いオブジェクトを取得するには、だから...誰かがこれに対する解決策を得ましたか?^^

Answer 1

以下のコードを使用してこれを実現できます。

var nodes = document.querySelectorAll('.change'),
    length = nodes.length,
    counter = 0;

for (; counter < length; counter += 1) {
    // set an attribute.
    nodes[counter].setAttribute('data-test', 'test' + counter);
    // add a click event.
    nodes[counter].addEventListener('click', function () {
        alert('Yep, you clicked me');
    }, false);
}

デモはこちら

Answer 2

jQueryを使用するだけです。次に、次のようなことをするだけです。

$(document).ready(function () {
    $('.change').click(function () {
        $(this).attr('class', 'new-value');
    });
});

JSFiddle のデモはこちら。