DOM 操作

JavaScript で DOM を操作するとき、まず最初に覚えるのが `getElementById` です。これは HTML...

`querySelector` と `querySelectorAll` は、CSS セレクタを使って要素を取得できる便利なメソ...

`getElementsByClassName` と `getElementsByTagName` は、クラス名やタグ名で複数の...

`closest` メソッドは、ある要素から親方向にたどって、指定したセレクタにマッチする最も近い祖先要素を取得します。イベント...

`matches` メソッドは、要素が指定した CSS セレクタにマッチするかどうかをチェックして、true または false...

`createElement` は、JavaScript で新しい HTML 要素を作成するメソッドです。動的にコンテンツを追加...

`appendChild` と `append` はどちらも要素を追加するメソッドですが、いくつかの違いがあります。新しい `a...

`insertBefore` は、指定した要素の直前に新しい要素を挿入するメソッドです。`appendChild` が末尾に追加...

`insertAdjacentHTML` は、HTML 文字列を指定した位置に挿入する便利なメソッドです。`innerHTML`...

`remove` と `removeChild` は、DOM から要素を削除するメソッドです。新しい `remove` のほうが...

`cloneNode` は、既存の要素をコピーして新しい要素を作るメソッドです。複雑な構造の要素を複製したいときに便利です。 基...

`classList` は、要素のクラスを操作するための便利なプロパティです。クラスの追加・削除・切り替えが簡単にできます。 c...

`setAttribute` と `getAttribute` は、要素の属性を操作するための基本メソッドです。どんな属性でも汎...

`dataset` は、`data-*` 属性を簡単に扱うためのプロパティです。カスタムデータをHTML要素に埋め込んで、Jav...

`id` と `className` は、要素の id 属性と class 属性に直接アクセスするプロパティです。`classL...

`parentNode` と `parentElement` は、要素の親を取得するプロパティです。ほとんどの場合は同じ結果にな...

`children` と `childNodes` は、要素の子を取得するプロパティです。よく似ていますが、取得できるノードの種...

子要素の最初や最後を取得するプロパティがいくつかあります。`firstChild` / `lastChild` と `first...

`nextSibling` と `previousSibling` は、兄弟ノードを取得するプロパティです。同様に `nextE...

`nodeType` は、ノードの種類を数値で返すプロパティです。テキストノードと要素ノードを区別したいときに使います。 nod...

`textContent` と `innerText` は、要素のテキストを取得・設定するプロパティです。似ていますが、いくつか...

`innerHTML` は、要素の中身を HTML 文字列として取得・設定するプロパティです。手軽に HTML を操作できますが...

`outerHTML` は、要素自身も含めた HTML 文字列を取得・設定するプロパティです。`innerHTML` が中身だけ...

`style` プロパティを使うと、JavaScript から直接 CSS スタイルを変更できます。要素のインラインスタイルを操...

`getComputedStyle` は、要素に実際に適用されているスタイルを取得する関数です。CSS ファイルで設定したスタイ...

`cssText` は、要素のインラインスタイルを文字列としてまとめて取得・設定するプロパティです。複数のスタイルを一度に設定し...

ある要素がブラウザのビューポート上でどこに表示されているか、どれくらいの大きさかを正確に知りたい場面は頻繁にあります。ツールチッ...

要素のサイズを取得するプロパティとして offsetWidth / offsetHeight と clientWidth / c...

DOM のノードは特定のドキュメントに所属しています。あるドキュメントのノードを別のドキュメントで使おうとすると、そのままでは動...

DOM から要素を削除しても、その要素に紐づいたイベントリスナーやタイマー、外部リソースへの参照が残っていると、ガベージコレクタ...

ブラウザ上でテキストをドラッグして選択する操作は日常的に行われていますが、この選択範囲をプログラムから制御できることはあまり知ら...

DOM 操作を繰り返していると、目に見えないところでテキストノードが断片化していきます。一つの段落に見えるテキストが内部的には複...