HTMLとDOMツリーとは？

HTMLとDOMツリーの意味

HTMLは要素を入れ子のタグで表す文書形式で、ブラウザはこれを解析して木構造のオブジェクト集合（DOM）に変換する。スクリプトはDOMのノードを走査・追加・削除して画面を書き換える。文書の構造と見た目・振る舞いを分離する考え方が前提にある。

HTMLとDOMツリーの具体例

一覧画面で1,000行を1行ずつDOMに追加すると再描画が繰り返され遅くなるため、断片をメモリ上で組み立ててから一度だけ挿入する。逆に検索では、ルートから深さ優先で子ノードをたどる木の走査と同じ計算量の考え方が効いてくる。

HTMLとDOMツリーは試験でどう引っ掛けられる？

HTMLソースとDOMは同じではない。スクリプトによる変更後のDOMが実際の表示であり、閉じタグの省略や不正な入れ子はブラウザが補正するため、ソースの見た目と木構造が食い違うことがある。

HTMLとDOMツリーと関連する用語

• 木構造（二分木）
• XPathによる要素の指定
• レスポンシブWebデザインとアクセシビリティ

HTMLとDOMツリーが出た過去問

• HTMLに関する記述のうち、適切なものはどれか。

  正解：Webページを記述するための言語であり、タグによって文書の論理構造などを表現する。

  要点：HTMLはタグで文書構造を表すWebページ記述言語

  HTMLはWebページを記述するためのマークアップ言語で、見出しや段落、リンクなどをタグで囲むことによって文書の論理構造や体裁を表現する。SGMLを簡略化して生まれた言語であり、XMLもSGMLを起源とする別系統である。Webページの転送に使われるのはHTTPで、FTPはファイル転送用のプロトコルである。

  出典：平成21年度 春期 ITパスポート試験 問83（IPA）

• 文書の構造などに関する指定を記述する、"<"と">"に囲まれるタグを、利用者が目的に応じて定義して使うことができる言語はどれか。

  正解：XML

  要点：XMLはタグを自分で定義できるマークアップ言語

  XMLは、データの意味や構造を表すタグを利用者が自由に定義できるマークアップ言語である。タグの種類があらかじめ決められているHTMLと違い、業界や用途ごとに独自の書式を定義でき、システム間のデータ交換の形式として広く使われている。

  出典：平成22年度 秋期 ITパスポート試験 問56（IPA）

• XMLで、文章の論理構造を記述する方法はどれか。

  正解：文章や節などをタグで囲む。

  要点：XMLはタグで囲んで文書の論理構造を表す

  XMLは、開始タグと終了タグで内容を囲むことによって、その部分が何を意味するかを示すマークアップ言語である。タグは入れ子にできるため、章・節・項といった文書の階層構造をそのまま表現できる。タグ名を自由に定義できる点がHTMLとの大きな違いである。

  出典：平成22年度 春期 ITパスポート試験 問63（IPA）

• プロトコルに関する記述のうち，適切なものはどれか。

  正解：SMTPは，電子メールを送信するためのプロトコルである。

  要点：送信はSMTP、受信はPOP、Web閲覧はHTTP

  SMTPは電子メールを送信・転送するためのプロトコルである。HTMLはWebページの記述言語であってプロトコルではなく、Webデータの送受信にはHTTPを用いる。ネットワーク監視にはSNMP、遠隔操作にはTelnetやSSHを使い、POPはメールサーバから受信メールを取り出すためのプロトコルである。

  出典：平成23年度 秋期 ITパスポート試験 問77（IPA）

• HTMLを使用して作成できるものはどれか。

  正解：Webページ

  要点：HTMLは文書構造をタグで記述してWebページを作るマークアップ言語

  HTMLは、見出しや段落、表、リンクといった文書の構造をタグで記述するためのマークアップ言語で、Webページの記述に用いられる。ブラウザ自体はプログラミング言語で作るソフトウェアであり、音声や動画のデータもHTMLで作るものではなく、HTMLからは埋め込んで参照するだけである。

  出典：平成24年度 秋期 ITパスポート試験 問59（IPA）