HTMLとDOMツリーとは？

HTMLとDOMツリーの意味

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

HTMLとDOMツリーの具体例

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

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

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

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

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

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

• Web環境での動的処理を実現するプログラムであって，Webサーバ上だけで動作するものはどれか。

  正解：Javaサーブレット

  要点：サーブレットはサーバ側実行、アプレットやJSはクライアント側

  サーバ側で動くかクライアント側で動くかを問う問題。サーブレットはWebサーバ（アプリケーションサーバ）上で実行され、リクエストを受けて動的にHTMLなどを生成して返す仕組みである。他の3つはいずれもブラウザ側で実行されるため、サーバ上だけで動作するという条件に合わない。

  出典：平成28年度 秋期 基本情報技術者試験 午前 問8（IPA）

• 3層クライアントサーバシステム構成で実現したWebシステムの特徴として，適切なものはどれか。

  正解：業務処理はサーバ側で実行し，クライアントソフトはHTMLの記述に従って，その結果を画面に表示する。

  要点：3層Webは処理をサーバ側に集約し、端末は表示のみ

  3層構成はプレゼンテーション層・ファンクション（アプリケーション）層・データ層に分ける方式で、Webシステムでは業務処理をサーバ側のアプリケーション層で実行し、クライアントはブラウザでHTMLを解釈して結果を表示するだけになる。クライアントに業務処理を置かないため、配布や更新の手間が小さいのが利点である。

  出典：平成28年度 秋期 基本情報技術者試験 午前 問13（IPA）

• HTML文書の文字の大きさ，文字の色，行間などの視覚表現の情報を扱う標準仕様はどれか。

  正解：CSS

  要点：HTMLは構造、CSSは文字色や行間などの視覚表現を担当する

  HTMLは文書の構造を記述する言語であり、見た目の指定は別の仕組みに切り離すのが標準的な考え方である。その見た目、すなわちフォントサイズや色、行間、余白、配置などのスタイルを記述するための標準仕様がCSS（Cascading Style Sheets）である。構造と表現を分離することで、同じHTMLに対してスタイルだけを差し替えられる。

  出典：平成28年度 春期 基本情報技術者試験 午前 問24（IPA）

• Webサーバにおいて、クライアントからの要求に応じてアプリケーションプログラムを実行して、その結果をWebブラウザに返すなどのインタラクティブなページを実現する…

  正解：CGI

  要点：CGIはWebサーバと外部プログラムを連携させる仕組み

  CGI（Common Gateway Interface）は、Webサーバがクライアントの要求に応じて外部プログラムを起動し、その実行結果をHTMLとしてブラウザに返すための仕組みを定めた規約である。これにより静的なページだけでなく動的なページを提供できる。

  出典：平成30年度 春期 基本情報技術者試験 午前 問35（IPA）

• SQLインジェクション攻撃による被害を防ぐ方法はどれか。

  正解：入力された文字が、データベースへの問合せや操作において、特別な意味をもつ文字として解釈されないようにする。

  要点：SQL文の制御記号として解釈させないのが根本対策

  SQLインジェクションは、入力値に含まれる引用符などの記号がSQL文の一部として解釈されてしまうことで起こる。対策は、入力された文字をSQLにとって特別な意味をもつ記号として扱わせないことであり、プレースホルダを使った問合せや適切なエスケープ処理がこれに当たる。HTMLタグの無害化はクロスサイトスクリプティング、上位ディレクトリ指定の拒否はディレクトリトラバーサルへの対策である。

  出典：令和4年度 s 基本情報技術者試験 kamokuA 問36（IPA）