【javascript】getElementByIdとgetElementByClassNameとgetElementsByTagNamの違い

getElementById

htmlタグの中で指定したidを使って、その要素を取得する

じゃあ、getElementByClassNameでも同じではないか？と思うかもしれないけどidは1つのhtmlコードで重複できない
classなら重複できるという違いがある

html

 id = "js-exsample"

javascript

document.getElementById('js-exsample');

みたいな感じで使う

getElementsByTagName

箇条書きのタグがあったとすると

html

<li>Sample2</li>

javascript

document.getElementsByTagName('li');

返り値は、配列みたいになっているので、for文で取り回して使う

getElementByClassName

var hoge = document.getElementByClassName('hoge');

みたいな感じ

返り値は、配列みたいになっているので、for文で取り回して使う

他の方法

qiita.com

使ってないのでわかりませんが、querySelectorAllとかでも選択できる？

//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")

//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")

//h1タグの要素を指定する場合
document.querySelectorAll("h1")

参考

qiita.com

qiita.com

ランキングに参加中です、クリックにご協力お願いします！