DOMツリー

HTMLドキュメントのバックボーンはタグです。

Document Object Model（DOM）によれば、すべてのHTMLタグはオブジェクトです。ネストされたタグは、それを囲むタグの「子」です。タグ内のテキストもオブジェクトです。

これらのオブジェクトはすべてJavaScriptを使用してアクセスでき、それらを使用してページを変更できます。

たとえば、document.bodyは<body>タグを表すオブジェクトです。

このコードを実行すると、<body>が3秒間赤くなります。

document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back

ここではstyle.backgroundを使用してdocument.bodyの背景色を変更しましたが、他にも多くのプロパティがあります。

innerHTML – ノードのHTMLコンテンツ。
offsetWidth – ノードの幅（ピクセル単位）。
…など。

すぐにDOMを操作するより多くの方法を学習しますが、まずその構造について知る必要があります。

DOMの例

次の単純なドキュメントから始めましょう。

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

DOMはHTMLをタグのツリー構造として表します。それがどのように見えるかは次のとおりです。

上の図では、要素ノードをクリックすると、その子が開いたり閉じたりします。

すべてのツリーノードはオブジェクトです。

タグは要素ノード（または単に要素）であり、ツリー構造を形成します。<html>はルートにあり、<head>と<body>はその子などです。

要素内のテキストはテキストノードを形成し、#textとしてラベル付けされます。テキストノードには文字列のみが含まれます。子を持つことはできず、常にツリーの葉です。

たとえば、<title>タグにはテキスト"About elk"があります。

テキストノードの特殊文字に注意してください。

改行：↵（JavaScriptでは\nとして知られています）。
スペース：␣

スペースと改行は、文字や数字と同様に完全に有効な文字です。それらはテキストノードを形成し、DOMの一部になります。そのため、上記の例では、<head>タグには<title>の前にいくつかのスペースが含まれており、そのテキストは#textノードになります（改行とスペースのみが含まれます）。

最上位の除外は2つだけです。

<head>前のスペースと改行は、歴史的な理由から無視されます。
</body>の後に何かを配置すると、HTML仕様ではすべてのコンテンツを<body>内に配置する必要があるため、自動的にbodyの最後に移動されます。そのため、</body>の後にスペースを入れることはできません。

その他のケースでは、すべてが簡単です。ドキュメントにスペース（任意の文字と同様に）がある場合、それらはDOMのテキストノードになり、それらを削除すると、何もなくなります。

スペースのみのテキストノードはありません。

          <!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
        

DOMを操作するブラウザーツール（すぐに説明します）は、通常、テキストの先頭/末尾のスペースとタグ間の空のテキストノード（改行）を表示しません。

開発者ツールはこの方法で画面スペースを節約します。

以降のDOM図では、関連性がない場合は省略することがあります。このようなスペースは、通常、ドキュメントの表示方法に影響しません。

自動修正

ブラウザが不正なHTMLを検出すると、DOMを作成するときに自動的に修正します。

たとえば、最上位のタグは常に<html>です。ドキュメントに存在しなくても、ブラウザが作成するため、DOMに存在します。<body>についても同様です。

例として、HTMLファイルが単一の単語"Hello"の場合、ブラウザはそれを<html>と<body>にラップし、必要な<head>を追加し、DOMは次のようになります。

DOMを生成する際、ブラウザはドキュメントのエラーを自動的に処理し、タグを閉じます。

閉じられていないタグを持つドキュメント

          <p>Hello
<li>Mom
<li>and
<li>Dad
        

…ブラウザがタグを読み取り、欠落している部分を復元すると、通常のDOMになります。

興味深い「特別なケース」はテーブルです。DOM仕様では<tbody>タグが必要ですが、HTMLテキストでは省略できます。その後、ブラウザはDOMに<tbody>を自動的に作成します。

HTMLの場合

<table id="table"><tr><td>1</td></tr></table>

DOM構造は次のようになります。

ご覧のとおり、<tbody>はどこからともなく現れました。驚かないように、テーブルを操作する際にはこの点を覚えておく必要があります。

その他のノードタイプ

要素ノードとテキストノード以外にも、いくつかのノードタイプがあります。

たとえば、コメント

          <!DOCTYPE HTML>
<html>
<body>
  The truth about elk.
  <ol>
    <li>An elk is a smart</li>
    <!-- comment -->
    <li>...and cunning animal!</li>
  </ol>
</body>
</html>
        

ここでは、2つのテキストノード間に、#commentとしてラベル付けされた新しいツリーノードタイプであるコメントノードが表示されます。

コメントがDOMに追加される理由を疑問に思うかもしれません。視覚的な表現にはまったく影響しません。しかし、ルールがあります。HTMLにあるものは、DOMツリーにも存在する必要があるということです。

コメントであっても、HTML内のすべてのものはDOMの一部になります。

HTMLの最初の<!DOCTYPE...>ディレクティブもDOMノードです。<html>の直前のDOMツリーにあります。それを知っている人はほとんどいません。そのノードには触れません。図には描画しませんが、そこにあります。

ドキュメント全体を表すdocumentオブジェクトは、正式にはDOMノードでもあります。

12種類のノードタイプがあります。実際には、そのうち4つを通常使用します。

document – DOMへの「エントリポイント」。
要素ノード – HTMLタグ、ツリーの構成要素。
テキストノード – テキストが含まれています。
コメント – 時々情報をそこに置くことができます。表示されませんが、JSはDOMから読み取ることができます。

自分で確認してください

リアルタイムでDOM構造を確認するには、Live DOM Viewerを試してください。ドキュメントを入力するだけで、すぐにDOMとして表示されます。

DOMを調べるもう1つの方法は、ブラウザの開発者ツールを使用することです。実際、開発時に使用しているのはこれです。

そのためには、ウェブページelk.htmlを開き、ブラウザの開発者ツールをオンにして、「要素」タブに切り替えます。

次のようになります。

DOMを確認し、要素をクリックして詳細を確認できます。

開発者ツールのDOM構造は簡略化されていることに注意してください。テキストノードはテキストとして表示されます。また、「空白」（スペースのみ）のテキストノードはまったくありません。ほとんどの場合、要素ノードに興味があるので、これで問題ありません。

左上の隅にあるボタンをクリックすると、マウス（またはその他のポインティングデバイス）を使用してウェブページからノードを選択し、「検査」することができます（「要素」タブでスクロールします）。これは、巨大なHTMLページ（およびそれに対応する巨大なDOM）があり、特定の要素の位置を確認したい場合に非常に役立ちます。

もう1つの方法は、ウェブページを右クリックしてコンテキストメニューから「検査」を選択することです。

ツールの右側に、次のサブタブがあります。

スタイル – 組み込みルール（灰色）を含む、ルールごとに現在の要素に適用されるCSSを確認できます。下のボックスの寸法/マージン/パディングなど、ほとんどすべてをその場で編集できます。
計算済み – プロパティごとに要素に適用されるCSSを確認します。各プロパティについて、それを与えるルール（CSSの継承など）を確認できます。
イベントリスナー – DOM要素にアタッチされているイベントリスナーを確認します（チュートリアルの次のパートで説明します）。
…など。

それらを学習する最良の方法は、クリックしてみることです。ほとんどの値はその場で編集できます。

コンソールとの対話

DOMを操作する際には、JavaScriptも適用したい場合があります。たとえば、ノードを取得して、いくつかのコードを実行してノードを変更し、結果を確認します。「要素」タブとコンソール間を移動するためのヒントをいくつか紹介します。

開始するには

「要素」タブで最初の<li>を選択します。
Escを押します – これで「要素」タブの下にコンソールが開きます。

最後に選択した要素は$0として使用でき、以前に選択した要素は$1などです。

それらに対してコマンドを実行できます。たとえば、$0.style.background = 'red'は、選択したリスト項目を赤くします。

このようにして、「要素」からコンソールにノードを取得します。

逆の方法もあります。DOMノードを参照する変数がある場合、コンソールでinspect(node)コマンドを使用して、「要素」ペインで確認できます。

または、下のdocument.bodyのように、DOMノードをコンソールに出力して「その場で」確認することもできます。

これはもちろん、デバッグ目的のためです。次の章以降では、JavaScriptを使用してDOMにアクセスして変更します。

ブラウザの開発者ツールは開発に非常に役立ちます。DOMを調べたり、試したり、何が間違っているかを確認したりできます。

概要

HTML/XMLドキュメントは、ブラウザ内でDOMツリーとして表されます。

タグは要素ノードになり、構造を形成します。
テキストはテキストノードになります。
…など、HTML内のすべては、コメントであってもDOM内に配置されています。

開発者ツールを使用してDOMを検査し、手動で変更できます。

ここでは、最初に始めるための最も使用頻度が高く重要な操作の基本事項を説明しました。Chromeデベロッパーツールに関する詳しいドキュメントは、https://developers.google.com/web/tools/chrome-devtoolsにあります。ツールの学習方法は、あちこちをクリックしてメニューを読むのが一番です。ほとんどのオプションは直感的です。後で全体を理解したら、ドキュメントを読んで残りを学びましょう。

DOMノードには、ノード間を移動したり、ノードを変更したり、ページ内を移動したりするためのプロパティとメソッドがあります。これらについては、次の章で詳しく説明します。

DOMの例

自動修正

その他のノードタイプ

自分で確認してください

コンソールとの対話

概要

コメント

章

レッスンのナビゲーション