DOM 操作
3
views
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` は、要素のインラインスタイルを文字列としてまとめて取得・設定するプロパティです。複数のスタイルを一度に設定し...
