HTMLとDOMツリーとは？

HTMLとDOMツリーの意味

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

HTMLとDOMツリーの具体例

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

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

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

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

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

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

• WAFにおけるフォールスポジティブに該当するものはどれか。

  正解：HTMLの特殊文字“<”を検出したときに通信を遮断するようにWAFを設定した場合,“<”などの数式を含んだ正当なHTTPリクエストが送信されたとき,WAFが攻撃として検知し,遮断する。

  要点：フォールスポジティブは正当な通信を攻撃と誤判定して遮断すること

  フォールスポジティブ(偽陽性)とは、正当な通信を攻撃と誤って判定してしまうことをいう。アは数式中の不等号を含む正常なリクエストが遮断される例なので、これが該当する。逆に攻撃を見逃すのがフォールスネガティブ(偽陰性)で、イとエがその例である。

  出典：令和5年度 春期 情報処理安全確保支援士試験 am2 問10（IPA）

• WAFにおけるフォールスポジティブに該当するものはどれか。

  正解：HTMLの特殊文字“<”を検出したときに通信を遮断するようにWAFを設定した場合,数式を入力するWebサイトに“<”を数式の一部として含んだHTTPリクエストが送信されたとき,WAFが攻撃として検知し,遮断する。

  要点：偽陽性は正当な通信を攻撃と誤判定して遮断してしまうこと

  フォールスポジティブ(偽陽性)は、正当な通信を攻撃と誤判定してしまうことである。数式の一部として不等号を入力しただけの正常なリクエストが遮断されるアがこれに当たる。攻撃を見逃すイとエはフォールスネガティブ、不正を正しく遮断するウは正常な検知である。

  出典：令和6年度 秋期 情報処理安全確保支援士試験 am2 問12（IPA）

• Webページ内のHTMLフォームに入力されたデータがWebサーバに送られる際には、HTTPプロトコルのGETメソッド又はPOSTメソッドを用いたリクエストメッセ…

  正解：GETメソッドが使用される場合：リクエスト行、POSTメソッドが使用される場合：メッセージボディ

  要点：GETはURIのクエリ文字列、POSTはメッセージボディで送る

  GETメソッドではフォームの入力値はURLのクエリ文字列として連結されるため、リクエストメッセージの先頭にあるリクエスト行（メソッド、URI、HTTPバージョン）に含まれます。一方POSTメソッドでは、入力値はヘッダーの後に続くメッセージボディに格納されて送られます。GETはURLに値が現れるためアクセスログや履歴に残りやすく、機密情報の送信には適しません。

  出典：令和7年度 春期 情報処理安全確保支援士試験 am2 問20（IPA）