【実務・中級編】 DOMツリー構築アルゴリズム – Webブラウザの仕組み実践ガイド

` が暗黙的に閉じられたな」と勝手に判断し、仮想的な `

` を挿入する。
3. その結果、DOMツリー構造は次のように歪められる。

• P
• #text: “段落1のテキスト”
• DIV
• #text: “ここにブロック要素がいきなり来た！”
• P
• #text: “段落2のテキスト”

「ブラウザが勝手に直してくれるからラッキー！」と思ってはいけない。この「ブラウザの勝手な推測（Fuzzy Parsing）」こそが、環境によってレイアウトが崩れたり、DOM操作系ライブラリ（ReactやVueなどのVirtual DOM差分アルゴリズム）が「あれ、思ってたツリーと違うぞ？」とバグる最大の原因になる。

—

3. 実践：JavaScriptでDOM構築の挙動をハックする

百聞は一見にしかず。ブラウザがいかにシビアに、そしてダイナミックにDOMを組み立てているかを、現代のフロントエンドの現場で使えるきれいなコードで体感してみよう。

以下のコードは、外部の怪しいHTMLスニペットを安全に（かつDOM構築のライフサイクルを意識しながら）パースし、親しみやすい安全なノードとして現在のドキュメントにマウントする実践的なユーティリティだ。

/

• 与えたHTML文字列を安全にパースし、DOMノードのフラグメントとして返却する
• @param {string} htmlString – パース対象のHTML文字列
• @returns {DocumentFragment} 構築されたDOMフラグメント

/
export function createSafeDOMFragment(htmlString) {
// 1. DOMParser APIのインスタンスを生成
// これにより、現在のメインDOMを汚さずに独立したパーサコンテキストでHTMLを解析できる
const parser = new DOMParser();

// 2. parseFromStringでHTMLをパース
// 第2引数に ‘text/html’ を指定することで、HTML5の寛大なエラーハンドリング仕様が適用される
const doc = parser.parseFromString(htmlString, ‘text/html’);

// 3. パース時に発生した致命的なエラー（構文解析エラーなど）をチェック
// DOMParserはパースエラーがある場合、 要素をドキュメント内に生成する仕様
const parserError = doc.querySelector(‘parsererror’);
if (parserError) {
console.warn(
‘[DOM Parser Warning] HTMLの解析中に不正な構文が検出されましたが、ブラウザによりリカバリされました。’,
parserError.textContent
);
}

// 4. DocumentFragmentを使って、一括してDOMツリーを構築・アタッチする準備をする
// メモリ上でツリーを組み立てることで、余計なReflow（再レイアウト）を防ぐのがプロの技だ
const fragment = document.createDocumentFragment();

// body要素配下に構築されたDOMノードをフラグメントへ移し替える
// childNodesを直接ループしてmoveさせる
while (doc.body.firstChild) {
fragment.appendChild(doc.body.firstChild);
}

return fragment;
}

// — 【使用例】 —
// 不正なタグが含まれているHTMLをあえて渡してみる
const rawHtml = `