DOM操作について

DOMとは

JavaScriptの主な目的は、Webページの表示を変化させることです。
フレームワークや非同期処理など、他にもいろいろトピックがあると思うかもしれませんが、結局、ゴールはページの見た目を変えることです（だからこそ、基礎をしっかり学ぶことが大切になります）。
どのようにして JavaScriptがページの見た目を操作するのか理解するために、まずはブラウザがWebページを読み込む仕組みを簡単に押さえておきましょう。

  1. Webブラウザは、Webサーバから受け取ったHTML文書を解析し、DOM（Document Object Model）と呼ばれるデータ構造に変換します。
  2. DOMにCSSを解析して得られたスタイルルールを紐づけてレイアウト（画面上の配置）が計算され、最終的に画面描画（レンダリング）されます。

DOMは、HTMLが持つ要素の親子関係を、ツリー構造で表現します。たとえば以下のHTMLを読み込むと…

DOMツリー1

ブラウザ内部にこのようなDOM概念図が構築されます。

DOMツリー2

まず画面に表示するまでの流れはこのような感じなのですが、ここからが JavaScriptの出番です。

JavaScriptを使うと、ブラウザ内部にあるDOMにアクセスして、その内容を書き換えることができます。
DOMが書き換えられると、自動的に画面の内容が新たなDOMに合わせて再描画される仕組みになっています。

 

ノード

ここでもう一度、DOMの概念図を見てみてください。

上図の一つ一つの（青や緑の）箱を、「ノード」と言います。ノードにはいくつか種類がありますが、主に「要素ノード」「テキストノード」の2種類を意識しておけば大丈夫です。
「要素ノード」は、HTML要素を表します。属性や適用されたスタイルなどの情報（プロパティ）を持っています。「テキストノード」は文字通り、要素ではなく、テキスト部分です。
次に見ていくのは、DOMから特定のノードの情報を取得する方法です。後述しますが、取得したノード情報を書き換えると、DOMにもその変更が反映されます。

Documentオブジェクト

本題に入る前に、もう一点、前提知識を書いておきます。

ブラウザ内のJavaScriptエンジンには、基本的な文法を解析する機能のほかに、DOM操作などブラウザ固有の処理を行うためのオブジェクトがあらかじめ用意されています。
その一つがdocumentオブジェクトです。これは、HTML文書（つまり、画面に表示されているWebページ）を表すオブジェクトで、DOM操作のためのメソッドが含まれています。

では、DOM操作方法ですが、「.」を使用して記述をしていきます。
また、メソッドの戻り値がオブジェクトの場合、その戻り値を使ってさらにメソッドを呼び出すことができます。このようにメソッドを繋げて記述する方法をメソッドチェーン（メソッドカスケード）と呼びます。

 

id属性によるノード取得方法

Hello World!写真2

まず「getElementById」メソッドです。このメソッドは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
引数に指定されたid属性を持つ要素ノードを、DOM全体から検索します。もし見つからなければ、nullを返します。
そのため、今回の場合だと、getElementById("id1")とのことなので、id属性が"id1"という要素を取得するというメソッドになっています。
ここで登場してきたのが（""）の部分です。これは引数（パラメーター）と呼ばれ、メソッドを調整（設定）するための『値』を指定する場所です。

そして、その後に記述されているのが「innerHTML」プロパティです。これは、要素内の HTML または XML のマークアップを取得したり設定したりすることができます。
そのため、innerHTML = "Hello World!"ということなので、"id1"という要素のHTMLを"Hello World!"に設定するという記述になっています。

 

セレクターによるノード取得方法

querySelectorやquerySelectorAllというメソッドを使用します。
これらのメソッドは、セレクター文字列を引数に取り、合致する要素を検索して取得します。このセレクター文字列は、CSSで用いるセレクターと同じものです。

querySelectorはgetElementByIdと同じように、単一の要素ノードを返却します。セレクターに合致する要素が文書中に複数存在する場合は、HTML的に一番上に書かれている要素が取得されます。見つからない場合は、nullを返します。

（記述例）　　const button = document.querySelector("#redButton");

querySelectorAllは、セレクターに合致する複数の要素を返却します。

（記述例）　　const buttons = document.querySelectorAll(".button");

document以外の要素に対して呼び出すと、子要素から指定のセレクターに合致する要素が検索され取得されます。

セレクターイメージ

「JavaScript DOM操作」などのキーワードで検索すると、参考になる記事がたくさんヒットするでしょう。初心者の方は、書籍や、最近だと動画も含めて、いろいろな説明を吸収して、総合的に解釈するのが良いと思います。もちろん、手を動かすのも大切なのでどんどんコーディングをして力をつけていきましょう！

では次は、関数について紹介していきたいと思います。