HTMLとDOMツリーとは？

HTMLとDOMツリーの意味

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

HTMLとDOMツリーの具体例

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

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

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

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

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

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

• データベース（DB）へのアクセスを行うブラウザからのリクエスト処理を、Webサーバが受信し解読した後に行う一連の実行処理の順序はどれか。ここで、Webサーバはリ…

  正解：③, ⑤, ②, ④, ⑥, ①

  要点：DB処理は接続・SQL実行・結果整形・送信・切断の順

  リクエストを解読した後の流れは、まずデータベースへ接続し、次に必要なSQL文を組み立てて実行（アクセス）します。得られた結果を使ってHTML文書を組み立て、ブラウザへ送信し、最後に接続を切断します。SQL文の組立てはアクセスの前、HTMLの組立てはアクセス結果を受け取った後という前後関係が判断の決め手です。

  出典：平成28年度 秋期 応用情報技術者試験 午前 問12（IPA）

• クロスサイトスクリプティング対策に該当するものはどれか。

  正解：Webページに入力されたデータの出力データが，HTMLタグとして解釈されないように処理する。

  要点：XSS対策の要は出力時のエスケープでタグとして解釈させないこと。

  クロスサイトスクリプティングは、利用者が入力した文字列がそのままWebページに出力され、スクリプトとして実行されてしまうことで成立する。したがって対策の中心は出力時のエスケープ処理で、山括弧や引用符などをHTMLタグとして解釈されない文字表現に置き換えることである。入力値の検証も併用するが、根本は出力側での無害化にある。

  出典：平成30年度 秋期 応用情報技術者試験 午前 問41（IPA）

• レスポンシブWebデザインを実現するに当たって、単一のHTML文書を用いて、Webコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用す…

  正解：メディアクエリ

  要点：メディアクエリは画面幅に応じてCSSを切り替える仕組み

  メディアクエリは、CSSで画面幅や解像度などの条件に応じて適用するスタイルを切り替える機能である。これにより1つのHTML文書のまま、PC・タブレット・スマートフォンといった画面サイズごとに最適なレイアウトで表示できる。レスポンシブWebデザインの中核となる仕組みである。

  出典：令和6年度 秋期 応用情報技術者試験 午前 問50（IPA）

• W3Cで仕様が定義され，矩形や円，直線，文字列などの図形オブジェクトをXML形式で記述し，Webページでの図形描画にも使うことができる画像フォーマットはどれか。

  正解：SVG

  要点：SVGはXMLで図形を記述するW3C標準のベクター画像形式

  SVG（Scalable Vector Graphics）はW3Cが仕様を定めるベクター画像フォーマットで、図形や文字をXMLのテキストとして記述する。拡大しても劣化せず、HTMLに直接埋め込んでCSSやスクリプトから操作できるため、Webページの図形描画に広く使われる。

  出典：令和7年度 春期 応用情報技術者試験 午前 問23（IPA）