DOM : DOMの操作（変更） – 生成AI時代のプログラミング学習

dom_dom0400_001

新しい<li>要素を作成してテキストを設定するには、document.( A )(‘li’)で要素を作り、li.( B ) = ‘項目’のように内容を入れる。

既存の親要素の末尾に子要素を追加する古典的APIはparent.( A )Child(child)で、同様の目的で複数ノードや文字列も一度に追加できる近年のAPIはparent.( B )(…)である。

先頭に要素を差し込むにはparent.( A )(child)を使う。特定のノードの直前に入れたい場合はparent.( B )(newNode, referenceNode)を使う。

子ノードを削除するには親からparent.( A )(child)を呼ぶ。要素自身が自分を直接取り除くモダンな方法はelement.( B )()である。

属性を設定・変更するにはelem.( A )(‘data-id’,’42’)、属性を取り除くにはelem.( B )(‘data-id’)を用いる。

HTML文字列を解釈させて子要素ごと差し替えるにはelem.( A ) = ‘<strong>強調</strong>’を使う。テキストのみ安全に置き換えるにはelem.( B ) = ‘そのまま表示’を使う。

インラインスタイルを1つだけ変更するにはelem.( A ).color = ‘red’のようにし、クラスの付け外しはelem.( B ).add(‘active’)のように操作する。

状態トグルにはelem.classList.( A )(‘open’)が便利。存在すれば外し、なければ付ける。また、classList.( B )(‘open’)は常にクラスを追加する。

大量のノードを一括でDOMに挿入してReflowを減らすにはdocument.( A )()でフラグメントを作り、子をまとめて挿入後、parent.( B )(frag)で追加する。

既存要素を複製して挿入したい場合、深い複製はnode.( A )(true)で行い、複製結果を親の所定位置へはparent.( B )(clone, reference)で挿入できる。