この記事について
| 環境 | javascript |
|---|---|
| 目的 | getElementsByClassName で値が取れない理由を調べる |
| 結果 | 戻り値が HTMLCollection（集合）なので [0] などで要素を取り出す |
つまずきポイント要約
- getElementById は要素そのもの、getElementsByClassName は HTMLCollection を返す（sが付く＝複数）
javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。
getElementByIdとgetElementsByClassNameでは戻り値が違う。
getElementByIdの戻り値
存在する場合は要素（オブジェクト）を返し、存在しない場合はnullを返す。getElementsByClassNameの戻り値
存在する場合は1個以上のHTMLCollectionを返し、
存在しない場合は0個のHTMLCollectionを返す。getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。
//idにクリックイベントを設置
document.getElementById('content').click = function (e){
alert("クリックされた");
}//classにクリックイベントを設置
document.getElementsByClassName('box1')[0].onmouseup = function (e){
alert("クリックされた");
}