要素の取得・追加・削除
querySelector appendChild remove
JavaScriptでHTML要素をDOM（Document Object Model）から取得し、追加・削除する基本操作です。
デモ：要素の追加・削除
- アイテム A
- アイテム B
- アイテム C
要素の取得方法
| メソッド | 返り値 | 用途 |
|---|---|---|
querySelector() | 最初の1要素 | CSSセレクタで取得 |
querySelectorAll() | NodeList（全要素） | CSSセレクタで複数取得 |
getElementById() | 1要素 or null | IDで取得（高速） |
getElementsByClassName() | HTMLCollection（live） | クラス名で取得 |
コード例
js
// 要素の取得
const el = document.querySelector('#main'); // ID
const all = document.querySelectorAll('.item'); // クラス名（全て）
const h1 = document.querySelector('h1'); // タグ名
// 要素の作成・追加
const li = document.createElement('li');
li.textContent = '新しいアイテム';
document.querySelector('ul').appendChild(li); // 末尾に追加
// insertAdjacentElement（位置指定）
parent.insertAdjacentElement('beforeend', li); // 末尾
parent.insertAdjacentElement('afterbegin', li); // 先頭
// 要素の削除
el.remove(); // 自身を削除
parent.removeChild(child); // 子要素を削除
// 複数要素の操作
all.forEach(item => {
item.style.color = 'red';
});
// querySelectorAll は配列ではなく NodeList
// スプレッド演算子で配列に変換できる
const arr = [...document.querySelectorAll('.item')];比較：querySelector vs getElementById
| 観点 | querySelector | getElementById |
|---|---|---|
| セレクタ | CSSセレクタ全般 | IDのみ |
| 速度 | やや遅い | 高速（最速） |
| 柔軟性 | 高い（複雑な指定も可） | 低い |
| 推奨度 | ✅ 現代的・推奨 | △ IDが確実なとき |
NEWreplaceChildren()・before()・after()（モダンDOM操作）
従来の innerHTML = "" を置き換える安全なメソッド群です。
js
// replaceChildren: 子要素を全て置き換え（innerHTML=""より安全）
parent.replaceChildren(newChild1, newChild2);
parent.replaceChildren(); // 空にする
// before / after: 隣接要素として挿入
el.before(newEl); // el の直前に挿入
el.after(newEl); // el の直後に挿入
// prepend / append（複数挿入対応）
parent.prepend(el1, el2, '文字列も可');
parent.append(el1, el2);🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - querySelector/createElement/appendChild/removeChildを使ったDOM操作のサンプルを示す - querySelectorAll()でNodeListを取得して複数要素を一括操作する例を含める - DocumentFragmentを使った効率的なDOM追加のサンプルを含める - cloneNode()で要素を複製して追加する例を示す - MutationObserverでDOM変更を監視するサンプルを含める - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。