【javascript】getElementByIdとgetElementsByClassNameの違い

javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。

getElementByIdとgetElementsByClassNameでは戻り値が違う。

getElementByIdの戻り値
-----------------------------------------------------
存在する場合は要素(オブジェクト)を返し、存在しない場合はnullを返す。
-----------------------------------------------------

getElementsByClassNameの戻り値
-----------------------------------------------------
存在する場合は1個以上のHTMLCollectionを返し、
存在しない場合は0個のHTMLCollectionを返す。
-----------------------------------------------------

getElementById
getElementsByClassName

getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。

//idにクリックイベントを設置
-----------------------------------------------------
document.getElementById('content').click = function (e){
alert("クリックされた");
}
-----------------------------------------------------

//classにクリックイベントを設置
-----------------------------------------------------
document.getElementsByClassName('box1')[0].onmouseup = function (e){
alert("クリックされた");
}
-----------------------------------------------------