JavaScript入門講座ーDOMを初学者の方向けにわかりやすく解説

JavaScriptはウェブサイトの見た目を操作することができます。その時、DOMというものを使ってウェブサイトを作っていきます。
JavaScript奥が深く、様々な学ぶべきものが多い言語ですが、DOMはJavaScriptを学ぶ上で最も重要な項目の一つです。今回はJavaScriptの応用の中でも基本であるDOMについて初心者向けに解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOM入門者の方
DOMについて知りたい方

DOMの解説
まとめ
参考文献

DOMの解説

DOMとはなにか？

WebページやWebアプリを開発する際、ユーザ側が最も目に触れる部分であるWebコンテンツ、文書の部分を操作するというのがよく見られる基本的な機能になります。

たとえば、下記のような機能は良く見られると思います。

よく見られる機能

ツイッターの投稿機能
Mind Map
Googledocument

これらも含めて、世の中のWebコンテンツは何かしらのDOM(ドキュメントオブジェクトモデル)を操作することで、実現しています。

DOMとはHTMLやXMLと呼ばれている文書を扱うための機能です。更に詳しく言うと、HTMLやXMLに記述されている要素やテキストをプログラミングで言うところのオブジェクトに変換してくれます。DOMはJavaScriptを主としたプログラミング言語からオブジェクトを扱うための機能を提供してくれます。

ここでは、JavaScriptでHTMLを扱える機能という解釈でオッケーです。

HTMLの基礎知識

DOMを理解するには、最低限のHTML知識は必要になってきます。
まずはHTMLのドキュメントについて軽く触れていきましょう。

HTMLは主に要素というタグから作られています。

要素名	意味
<p></p>	段落を示す
<h></h>	見出しを示す
<img></img>	画像を示す
<li></li>	リスト項目を示す
<input />	入力欄を示す
<button></button>	ボタンを示す
<form></form>	フォームを示す
<select></select>	プルダウンメニューを示す
<option></option>	プルダウンメニューの選択肢を示す

主なHTMLで使うタグの一例です。
これらは本当に一部であるので、まだこの他にもたくさんあります。HTMLについては必要なときになったらその都度調べていくようにしましょう。

ノードの階層構造における関係

続いては、ノードの親子関係について解説していきます。HTMLのドキュメントはファイルのように階層構造となっています。　

HTMLの親子関係は図のようなイメージです。この例で例えると、header,main,footerの3つは同じ階層に並んでいるので、兄弟という関係になります。header,h1は一つ階層が違いますので、親子という関係になります。
階層が低いほうが子、その一つ上にあるのが親となります。また、header内にあるh1,pは同じ階層にいますので、兄弟関係となり、headerという共通の親を持っています。

このように、階層構造となっているタグ(ノードを)DOMでは取得・操作・追加・削除などを行うことが可能です。

DOMを使ってみよう

では、今回は入門編ということでDOMについて触れてみましょう。
まずは、HTMLファイルを準備してください。続いて、HTMLのbodyに次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>
   
        </script>
    </head>
    <body>
        <h2>DOMに入門するよ〜</h2>
        <p>コロナ〜るで厳しいけど、頑張って節約して賢く生きよう</p>
    </body>
</html>

HTMLには、とても基本的なh2タグとpタグを使っています。今回はDOMの触りということでかんたんな例で解説していきます。

これをGoogle Chromeで開いてみましょう。

開くとこのような文字が表示されると思います。
HTMLがまだ良くわからなくても、今は全く問題はありません。HTMLはJavaScriptと違ってマークアップ言語ですから、DOMができればHTMLはすぐ理解できます。

なので、今はh2とpタグを使うとこうなるんだ、くらいの理解度で大丈夫です。
では、ここからDOMを使ってみましょう。今回も、HTMLファイルにJavaScriptを書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h2 id="js-h2">DOMに入門するよ〜</h2>
        <p id="js-p">コロナ〜るで厳しいけど、頑張って節約して賢く生きよう</p>

        <script>
            let doc = document;
            let doc_h2 = doc.getElementById("js-h2");
            console.log(doc_h2);

            let doc_p = doc.getElementById("js-p");
            console.log(doc_p);
        </script>
    </body>
</html>

はい、JavaScriptをこのようにbody内に書きます。
ここで、「あれ？なんでJavaScriptをbodyに書いているの？普通はhead内に書くんじゃないの」と思う方がいるのではないでしょうか。

実はそのとおりなんです。基本的にはJavaScriptはhead内に記述します。しかし、DOMを使うとなると話が変わってきます。HTMLも同様に上から下へとブラウザがコードを読み込んでいきます。

となると、JavaScriptをhead内に書いてしまうと、bodyに記述したものをよりも先にJavaScriptがブラウザに読み込まれます。そうすると、指定したh2やpは存在しませんよ、というふうに解釈されてしまいます。なので、順番を逆にする必要があります。