HTMLとDOMツリーとは？えいちてぃーえむえるとどむつりー
HTMLは要素を入れ子のタグで記述するマークアップ言語で、ブラウザはパースの過程でこれを木構造のオブジェクト集合（DOM）へ変換し、CSSOMと合成してレンダリングツリーを作る。DOMは木そのものなので、走査・探索の計算量は木構造のアルゴリズムがそのまま当てはまり、深さ優先探索や親子・兄弟ノードの参照で任意のノードに到達できる。スクリプトはこのノードを追加・削除・属性変更することで表示を変え、変更のたびにレイアウト計算（リフロー）と再描画が走る。押さえるべき境界は、HTMLソース＝DOMではないという点である。閉じタグの省略や不正な入れ子はパーサが補正し、スクリプトによる変更後の状態が実際の表示になるため、ソースの文字列と木の形は一致しないことがある。XMLが整形式でない文書をエラーとするのに対し、HTMLパーサが補正を行うのもこの差に由来する。
最終更新：2026-10-06
この語が出る過去問を解く →背景
HTMLは人が手で書く文書であることを前提に設計され、閉じタグの省略や崩れた入れ子があってもブラウザが表示を諦めない寛容さを持たされた。その代わり、書かれた文字列と実際に構築される木は一致しない。加えてスクリプトが後から木を書き換えるため、「文書＝ソース」という前提そのものが成り立たなくなる。DOMはこのずれを吸収し、木の状態を言語非依存のAPIとして操作可能にするために標準化されたものである。応用情報でこの区別が問われるのは、スクレイピングやE2Eテストの取りこぼし、描画性能の劣化といった実務の不具合が、いずれもソースと木を同一視したところから生じるためである。
具体例
一覧画面に1,000行を描画する処理が遅いという指摘を受けたとき、ループの中でappendChildを1行ずつ呼んでいればその都度リフローが発生する。DocumentFragment上で1,000行を組み立ててから一度だけ挿入する実装に変えると、リフローが1回で済み体感が変わる——同じ「DOMを1,000回触る」でも、木への挿入回数を減らす設計かどうかで処理時間の桁が変わる。サーバサイドの改修やインデックス追加を検討する前に、まずこちらを疑う。
試験での引っ掛け
「HTMLソースに書かれていないから存在しない」という判断が誤りになる。スクリプト生成の要素はソース表示に現れず、スクレイピングやE2Eテストが動的生成部分を取りこぼす原因もここにある。DOMとHTMLの関係を「同じもの」と答えるか「パース結果のオブジェクト表現」と答えるかで正誤が分かれる。またDOMはブラウザ固有の仕組みではなくW3C/WHATWGが定めるAPIであり、XMLにも適用される点も境界として問われる。記述式では、性能改善の理由を「挿入のたびにリフローが発生するため、挿入回数を1回にまとめた」のように、原因と打ち手を対にして30〜50字で書く。
関連用語
出た過去問
出典：平成28年度 秋期 応用情報技術者試験 午前 問12（IPA）
データベース（DB）へのアクセスを行うブラウザからのリクエスト処理を、Webサーバが受信し解読した後に行う一連の実行処理の順序はどれか。ここで、Webサーバはリ…
正解：③, ⑤, ②, ④, ⑥, ①
要点：DB処理は接続・SQL実行・結果整形・送信・切断の順
リクエストを解読した後の流れは、まずデータベースへ接続し、次に必要なSQL文を組み立てて実行（アクセス）します。得られた結果を使ってHTML文書を組み立て、ブラウザへ送信し、最後に接続を切断します。SQL文の組立てはアクセスの前、HTMLの組立てはアクセス結果を受け取った後という前後関係が判断の決め手です。
出典：平成30年度 秋期 応用情報技術者試験 午前 問41（IPA）
クロスサイトスクリプティング対策に該当するものはどれか。
正解：Webページに入力されたデータの出力データが，HTMLタグとして解釈されないように処理する。
要点：XSS対策の要は出力時のエスケープでタグとして解釈させないこと。
クロスサイトスクリプティングは、利用者が入力した文字列がそのままWebページに出力され、スクリプトとして実行されてしまうことで成立する。したがって対策の中心は出力時のエスケープ処理で、山括弧や引用符などをHTMLタグとして解釈されない文字表現に置き換えることである。入力値の検証も併用するが、根本は出力側での無害化にある。
出典：令和6年度 秋期 応用情報技術者試験 午前 問50（IPA）
レスポンシブWebデザインを実現するに当たって、単一のHTML文書を用いて、Webコンテンツを各種端末のディスプレイの大きさに合わせた形式で表示するために使用す…
正解：メディアクエリ
要点：メディアクエリは画面幅に応じてCSSを切り替える仕組み
メディアクエリは、CSSで画面幅や解像度などの条件に応じて適用するスタイルを切り替える機能である。これにより1つのHTML文書のまま、PC・タブレット・スマートフォンといった画面サイズごとに最適なレイアウトで表示できる。レスポンシブWebデザインの中核となる仕組みである。
出典・参考
公式シラバスの9 企業と法務 ＞ 5. 標準化関連 ＞ (5) データの標準に掲載されている用語です。
解説は資格暗記が独自に作成しています。過去問の出典は各問題に記載のとおりです。