JavaScript、getElementとgetElements

JavaScriptを利用する際には、document.getElement〜系でHTML内の要素を取得することが多いかと思います。

この中でID名だけは重複不可なのでElementと単数形で、クラス名やタグ名は重複が可能、複数が選択される可能性があるのでElementsと複数形なってます。

あー英語って感じー。

ネットで見かけたソースを改変していて「id名じゃなくてクラス名で選択しよー」などと getElementsById や getElementByClassName などとしてしまい、初心者が詰まるかもしれない（現に詰まった）とこです。idは単数。あとgetElementIDとIdを大文字にしてしまったりですね……Idとdは小文字です。

仮に以下のようなHTML要素があったとして

<div id="test">1個目</div>
<div class="test">2個目</div>
<div class="test">3個目</div>

// 1個目のid名testのdivだけを取得
var testId = document.getElementById('test');

// クラス名がtestの2個目3個目のdivを取得
var testClass = document.getElementsByClassName('test');

// divタグ全てを取得
var testTag = document.getElementsByTagName('div');

と取得する要素を選択できることになります。

テスト

色々書き替えられますよというテスト。 ボタンを押すと文字と文字色が変わります。リセット押すと戻ります。 getElementsTagNameはブログにまで影響が出てしまうので除外します。

Div1

Div2

Div3

ボタン1 ボタン2 リセット

ソース

<script type="text/javascript">
var testId;
var testClass;
var resetClass;
window.onload = function() {
 testId = document.getElementById('test');
 testClass = document.getElementsByClassName('test');
 resetClass = document.getElementsByClassName('reset');
}
function colorChange(num){
var divSelect;
    switch(num){
    case 0:
    divSelect = testId;
    break;
    case 1:
    divSelect = testClass;
    break;
    }
    if(!divSelect.length){
        divSelect.classList.add('red');
        divSelect.innerHTML = '文字が変わるよ！';
    }else{
        for(i=0; i <= divSelect.length-1; i++){
            divSelect[i].classList.add('red');
            divSelect[i].innerHTML = '文字が変わるよ！';
        }
    }
}

function btnReset(){

    for(i=0; i <= resetClass.length-1; i++){
        resetClass[i].classList.remove('red');
        resetClass[i].innerHTML = 'Div'+ (i+1);
    }
}
</script>