JavaScript DOMとは？基本の仕組みと要素の取得方法をわかりやすく解説

JavaScriptのDOM（Document Object Model：ドキュメントオブジェクトモデル）は、Webページ上のHTML要素を表現する仕組みです。DOMはインターフェースとして機能し、ページのコンテンツやスタイルを変更することで、Webページを自由に操作できるようにします。

DOMにアクセスするには、Webページ上で右クリックして「検証（Inspect）」を選択します。すると画面の右側または左側にパネルが表示され、現在閲覧しているページのHTML要素を確認できます。要素にマウスカーソルを合わせると、ページ上の該当部分がハイライトされるため、どの要素がページのどのセクションに対応しているのかがひと目でわかります。

さらに、開発者ツールのコンソールからコードを実行すれば、ページのコンテンツやスタイルを動的に操作することも可能です。

DOMはツリー構造でできている

DOMそのものは、親要素とその子要素が入れ子になった「ツリー（木）」と呼ばれるデータ構造です。子要素を持たない要素は「リーフ（葉）」と呼ばれます。

実際にページを検証してみると、ツリーの最上位ノードはdocumentであり、その下にhtmlタグが続きます。htmlタグからはheadタグが枝分かれし、そこにはscriptやtitleなどが含まれています。一方、bodyタグはheadタグとは独立した別の枝として、さまざまな要素を抱えています。以下は、Career Karmaのホームページを表す要素の一例です。

画像のように、bodyタグの子である特定のdiv要素にカーソルを合わせると、ホームページの右側のセクションがハイライトされます。本記事では、今後DOMを自在に操作できるようになるために、まずDOM内の要素を選択する方法について解説します。

DOMで要素を選択する2つの方法

DOMから要素を選択する方法は主に2つあります。1つはgetElements系メソッドを使う方法、もう1つはquerySelector系メソッドを使う方法です。

getElement系メソッド

getElement系メソッドは、タグ名・クラス名・idのいずれか1つの文字列を引数として受け取ります。タグ名やクラス名を指定した場合、「HTMLCollection」と呼ばれる配列風オブジェクトが返され、指定した要素がページ上にいくつ存在するかを確認できます。

document.getElementsByTagName('p')：ページ内のpタグをすべて取得します。たとえばCareer Karmaのホームページには、7つのpタグが存在します。

document.getElementsByClassName('hzjqne')：指定したクラス名を持つすべての要素を含むHTMLCollectionを返します。

document.getElementById('__NEXT_DATA__')：idを指定して要素を取得すると、一致する単一の要素が返されます。idはページ内で一意であるべきものなので、コレクションではなく単一の要素が返る点に注意しましょう。

querySelector系メソッド

querySelector系メソッドを使う際は、クラス名の前にドット（.）、id名の前にハッシュ記号（#）を付ける必要があります。この記号の付け忘れは、querySelector()やquerySelectorAll()を使う際に最も多いミスなので注意してください。

上のスクリーンショットのように、クラスやidを持つ要素が正しく取得できていることがわかります。

もう1つの重要な違いは、querySelectorAll()を使用した場合、HTMLCollectionの代わりに「NodeList」と呼ばれる配列風オブジェクトが返される点です。

HTMLCollectionとNodeListの大きな違いは、NodeListに対しては.forEach()メソッドが使えることです。HTMLCollectionではforEachを利用できないため、DOM操作の際に不便を感じることがあります。ただし、JavaScriptには配列風オブジェクト（HTMLCollectionやNodeListなど）から本物の配列を生成するためのメソッドが用意されています。それがArrayクラスの.from()メソッドです。

Array.from(arrayLikeObject)

なお、querySelector系メソッドは、getElements系メソッドで選択できるすべての要素を選択できます。用途に応じて使い分けるとよいでしょう。

まとめ

DOMは、WebページのHTMLを表現する強力なインターフェースです。ツリー構造を持っており、ページを検証することでその構造を目で確認できます。querySelector()などのquerySelector系メソッドやgetElements系メソッドを活用すれば、JavaScriptでページのあらゆる要素を自在に操作できるようになります。まずは開発者ツールを開いて、実際にDOMの構造を観察しながら各メソッドを試してみてください。