DOM : 高度なDOM操作 – 生成AI時代のプログラミング学習

dom_dom0700_001

子要素まで含めてノードを複製したいときは node.( A ) に true を渡す。子要素を含まない複製は node.cloneNode(( B )) のようにする。

cloneNode() で作った複製には既存のイベントリスナはコピーされない。必要なら複製後に ( A ) を付け直すか、親に ( B ) を使って対応する。

大量挿入のときは ( A ) を使って一時的にノードをため、最後にまとめて親へ追加する。( A ) 自体は ( B ) には現れない。

DocumentFragment に要素を貯めてから parent.( A ) で挿入すると、個別追加に比べて ( B ) の回数を減らせる。

<template> 要素の template.( A ) は DocumentFragment を返す。中身を使い回すには template.content.( B ) で複製する。

スクリプトを動的読み込みする際、script.( A ) = true だと並列取得・到着次第実行（順序は保証されない）。script.( B ) = true だと解析後に順序を保って実行される。

スタイルシートを動的に読み込むには link.rel = “( A )” とし、link.( B ) = “style.css” のように URL を指定して挿入する。

Shadow DOM を作るには host.( A )({ mode: ‘open’ }) のようにする。mode: ‘open’ だと外部から host.( B ) で内部にアクセスできる。

Shadow DOM 内で外部コンテンツの差し込み位置は ( A ) 要素で定義し、ライト DOM 側では要素の ( B ) 属性にスロット名を指定する。

Shadow DOM のスタイルは原則として外部へ漏れない。外部から内部の一部をスタイルする必要があるときは ( A ) 擬似要素で公開部品を指定するか、スロット経由の子には ( B ) 擬似クラス（セレクタ）を使う。