#要素の取得の違い
DOM操作をするときに必須となる、要素の取得ですが教材によってgetElementById
を使っていたり、quertSelector
を使っていたりと、どちらがいいの?と疑問を持ちました。
やっていることは同じように見えるのに、使い分ける意味は?
-
getElementById
その名前の通り、idを指定して要素を取得する。
返り値はnull
/HTMLElement
-
querySelector
要素の取得には、要素名、クラス名、idとCSSのセレクタとなり得るものは大体使える。
該当する要素が複数ある場合は最初の要素を取得する。
返り値はHTMLElement
###getElementsBy~
getElementByTagName
やgetElementByClassName
は
返り値が配列(のようなもの)で返されます。
取得した各要素に操作をする場合はforループ等で回す必要があります。
##まとめと考察
getElementBy~
の方が処理が速いそうですが、ブラウザの処理速度が速くなっているので、体感できない程度の差のようです。
結局どちらがいいかはケースバイケースですが、getElementBy~
は厳格でパフォーマンスが高い。
querySelector
は柔軟で気軽に使える。
といったイメージでいいのでしょうか?