JavaScriptからHTMLを操作するためのDOMの基礎知識

2018年12月25日 22:35

JavaScriptをつかってアプリなりサービスなりを開発するとき、JavaScriptからHTMLを操作するにはどうすればいいのでしょうか。そこで登場するのが『DOM』です。

実際にはjQueryなどのライブラリを使うことが多いのであまり意識することはないかもしれませんが、ここでは「DOMってなんやねん」という部分を、復習がてらまとめておこうとおもいます。

想定している読者はこちら。
・HTML/CSSの基礎を知っているプログラミング初心者
・ProgateなどでJavaScriptの基礎を学んだひと
・これからアプリやウェブサービスを作ってみたいひと

なお、ここではDOMの概念的なところを解説します。実際のDOMの操作方法については、いろんな方がまとめているのでググってみてください。

DOMってなに？

DOMというのはDocument Object Modelの略のこと。HTMLやXMLでつくられたドキュメントを、アプリケーションから利用するためのAPIです。

「APIってなに」ってひとはあとでググってほしいですが、とりあえずは「DOM=JavaScriptなどのプログラミング言語をつかって、HTMLを操作するための仕組み」というイメージで大丈夫です。

<p>Hello, guest!</p>

<script>
    /* ログインしているときは、「guest」をユーザー名に変更するJavaScriptのコードをかきたい　*/
 
</script>

うえのコードをみてください。pタグで囲まれた「guest」という部分をユーザー名に変更するコードを考えたとき、if文などで判定をしたあと、
①pタグにアクセスする
②pタグの中身を変更する
③修正した内容をHTMLに反映させる
といった操作が必要になりますよね。この①と③のステップ、つまり「プログラムからHTMLをいじる」瞬間にDOMが使われているのです。

DOMツリーとは

もうすこし具体的にみていきましょう。

DOMは、HTMLドキュメントを「ツリー（木）の形をしたオブジェクト（モノ）の集合」として取り扱い、これをDOMツリーといいます。ツリーとかオブジェクトとか言っていますが、「HTMLの構造を、木のような階層構造でもってる」と思ってもらえばOKです。

ここでHTMLの書きかたを思い出してください。HTMLでは、タグを入れ子にして書いていきましたよね。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>It's Centred That ver.clone</title>
	</head>
	<body>
		<div id="main">
                    <img src='sample.png'>
                    <div>
                        <p>Hello World</p>
                    </div>
                    <ul>
                        <li>abc</li>
                        <li>abc</li>
                        <li>abc</li>
                    </ul>
                </div>
	</body>
</html>

たとえばこんなHTMLを木構造になおすと、こんなかんじになります。

html--head--meta
   |     |--title
   |
   |--body--div--img
              |--div--p
              |--ul--li
                  |--li
                  |--li

HTMLドキュメントがもともとツリー構造（っぽい）なので、DOMもまるっとそのままツリー構造で持ってますよ、って話ですね。

オブジェクトとノードと要素

先ほどチラッといった『オブジェクト』というのは、うえの例のheadとかdivといった塊のこと。DOMではこのひとつひとつのオブジェクトを「ノード」といいます。

『ノード』には「節」とか「節点」という意味がありますが、HTMLで登場した「要素」と言い換えることも可能です（厳密にいうとノードがスーパータイプで、それを継承したのが要素）。

つまり、DOM云々という話ででてきた『オブジェクト』とか『ノード』というワードは、HTMLの『要素』とほぼほぼ同義になります。

たとえば、ノードには親とか子という概念があって、あるひとつのノードから他のノードを参照するときには、「親ノード」とか「子ノード」と呼びます。HTML要素でも、「親要素」とか「子要素」と言いましたよね。

Documentオブジェクト

DOMツリーのルート（いちばんの根元）となるノードが、『Documentオブジェクト』です。

つまりDocumentオブジェクトは、そのHTML全体の情報をもっていることになります。また、JavaScriptでは『document』というグローバル変数をつかってアクセスすることができます。

もしネイティブのJavaScriptを少しでも書いたことがあるならば、「document.~」と書いた記憶があるのではないでしょうか。この『document』こそがDocumentオブジェクトそのものです。

<script>
    const main = document.getElementById('main');
</script>

うえのコードでは、
①documentオブジェクトにアクセスし
②mainというidのついた要素を取得して
③mainという定数に代入
という流れで、プログラムからHTMLを操作しているんですね。

最後に、はじめの例をもういちど考えると、以下のようなかんじでpタグの中身をJavaScriptから変更することが可能になります。

<p id='hello'>Hello, guest!</p>

<script>
    /* ログインしているときは、「guest」をユーザー名に変更するJavaScriptのコードをかきたい　*/
    const userName = '';
    const target = document.getElementById('hello');
    if(ログインの条件判定){
        target.innerHTML = ’Hello, ’ + userName + '!';
    }
</script>

また、こんなふうに書けばpタグの親要素にアクセスすることも可能。

<script>
    const target = document.getElementById('hello');
    const parent = target.parentNode;
</script>

こんな感じで、DOMを利用してHTMLをJavaScriptから操作していくわけですね。DOMが理解できていなくてもJavaScriptを書くことはできますが、エラーが起きたときの問題の切り分けのときにはこういった基礎的な理解が大切になる気がします。

この記事が気に入ったらサポートをしてみませんか？