JavaScriptからHTML要素を変更したい時、まずその要素を取得すると思います。
しかしその要素を取得する方法はgetElementByIdやgetElementsByClassNameなど様々な方法があります。しかし、それらは若干返すものが異なり、いざ操作しようと思ったときに困ることがしばしばあります。
今回は、DOMで要素を取得したときに返す値についてまとめていきます。
1つ目 Elementオブジェクト
これが返ってくるものは
- getElementById
- querySelector
などがあります。
例えばこんなHTMLがあったとします。
<body>
<h1 id="title">タイトル</h1>
<ul>
<li class="list">リスト1</li>
<li class="list">リスト2</li>
<li class="list">リスト3</li>
</ul>
</body>
そのHTML要素を取得するためのJSファイルがあるとします。
console.log(document.getElementById("title"));
// => <h1 id="title">タイトル</h1>
console.log(document.querySelector("li"));
// => <li class="list">リスト1</li>
実際に取得するとこのように表示されます。これはHTMLオブジェクトであり、変数などに渡してあげればそのままaddEventListnerなどでイベント処理を書くことも可能です。
getElementByIdはIdを取得するがIdは一意のため、QuerySelectorは該当する1番目の要素を返すためこれが成り立ちます。
2つ目 HTMLコレクション
これが返ってくるものは
- getElementsByClassName
- getElementsByTagName
などがあります。
試しにgetElementsByClassNameで要素を取得してみます。(HTMLファイルは最初の物を参照します)
console.log(document.getElementsByClassName("list"));
//=> HTMLCollection {0: HTMLLIElement, 1: HTMLLIElement, 2: HTMLLIElement, length: 3, item: ƒ item()…}
HTMLコレクションを簡単に言うと要素の集合体です。この中に該当する要素が入っています。(今回だとlistクラスを持つものです。)
このコレクションから要素を取得するにはindexやidなどで取得することが出来ます。
console.log(document.getElementsByClassName("list")[0]); //=> <li class="list">リスト1</li>
console.log(document.getElementsByClassName("list")["middle"]); //=> <li class="list" id="middle">リスト2</li>
このように配列のようなHTMLコレクションから指定すればHTMLオブジェクトとして取り出すことが出来、イベント処理などが出来るようになります。
3つ目 NodeListコレクション
これが返ってくるのは
- querySelectorAll
が主なメソッドです。
console.log(document.querySelectorAll("li"));
//=>NodeList {0: HTMLLIElement, 1: HTMLLIElement, 2: HTMLLIElement, entries: ƒ entries(), keys: ƒ keys()…}
NodeListはHTMLコレクションとほぼ変わりません。強いて上げるならHTMLコレクションは動的でありNodeListコレクションは静的であることが挙げられます。複雑なDOM操作をしない限りそこまで気にする必要もないと思います。
結局どれで取得するのがいいの？
現状一番ベターなのはgetElementByIdだと思います。最後に紹介したquerySelectorAllなどは非常に高機能ですが、その分低速になりやすいです。
逆にgetElementByIdなどは一意のIdを取得するのでとても高速です。
以上の事から対応できる範囲でgetElement.ByIdで処理して、それではきついような高度な取得をしたいときにはquerySelectorなどを使うのがオススメです。