【保存版】JavaScript DOM操作チートシートまとめ

JavaScriptでよく使うDOM操作のプロパティやメソッドを、チートシート形式でまとめた記事です。Web制作やフロントエンド開発で頻出のDOM操作をコード付きで紹介します。学習中の方や実務でサッと見返したい方向けに作成しました！

<!-- TOC -->
<!-- /TOC -->


## 📖 目次

- [対象読者](#対象読者)
- [DOMとは](#domとは)
- [DOM操作チートシート（よく使う操作を解説付きで紹介）](#dom操作チートシートよく使う操作を解説付きで紹介)
  - [要素を取得する（基本中の基本）](#要素を取得する基本中の基本)
  - [テキスト・HTMLを変更する](#テキストhtmlを変更する)
  - [クラスを操作する（スタイル切り替えなど）](#クラスを操作するスタイル切り替えなど)
  - [イベントを設定する（クリック・入力など）](#イベントを設定するクリック入力など)
  - [スタイルを直接変更する](#スタイルを直接変更する)
  - [属性（href, srcなど）を操作する](#属性href-srcなどを操作する)
  - [要素を追加・削除する（createElementの使い方）](#要素を追加削除するcreateelementの使い方)
  - [要素を削除する（remove）](#要素を削除するremove)
- [実例：まとめ（基本操作一覧）](#実例まとめ基本操作一覧)
- [おわりに](#おわりに)




## 対象読者
・JavaScriptの基礎を学んでいる人
・DOM操作をコードで理解したい人
・よく使うメソッドやプロパティを一覧で見たい人



## DOMとは？ 
DOM（Document Object Model）は、WebページのHTMLをJavaScriptから操作できるようにした仕組みです。

例えば：
・ボタンをクリックしたら文字を変える
・特定の画像だけ表示を消す
・入力フォームの中身を取得する

こういったことは全部DOM操作で行います。


##  DOM操作チートシート【よく使う操作を解説付きで紹介】
 
### 要素を取得する（基本中の基本）
DOM操作のスタートは「HTMLのどの要素を操作するかを取得すること」。

よく使う取得メソッド
 
```diff_javascript
document.getElementById('myId');              // id属性で取得
document.querySelector('.myClass');           // CSSセレクタで1個だけ取得
document.querySelectorAll('.myClass');        // CSSセレクタで複数取得
```

解説
querySelectorAllはCSSと同じ書き方で対象を探せるので、実務で一番よく使われます。

複数の要素を取得したときは、NodeList（配列みたいなもの）が返ってきます。

使用例
```diff_html
<ul>
  <li class="item">りんご</li>
  <li class="item">みかん</li>
</ul>

<script>
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    console.log(item.textContent);
  });
</script>
```
:::note info
forEachが使える＝ループ処理でまとめて処理ができる、というのが便利ポイント！
:::

### テキスト・HTMLを変更する
```diff_javascript
element.textContent = 'こんにちは';    // テキストだけ変える
element.innerHTML = '<b>強調</b>';    // HTMLも含めて変更
```
違いは？
textContentはテキストのみを扱うので、安全かつ速い
innerHTMLはHTMLタグごと入れ替えるので、使い方を間違えるとセキュリティリスクあり

### クラスを操作する（スタイル切り替えなど）
```diff_javascript
element.classList.add('active');       // クラスを追加
element.classList.remove('hidden');    // クラスを削除
element.classList.toggle('open');      // ある/なしを切り替え
element.classList.contains('done');    // 含んでいるかチェック（true/false）
```

```diff_html
<button id="btn">メニューを開く</button>
<div id="menu" class="hidden">メニューの中身</div>

<script>
  const btn = document.getElementById('btn');
  const menu = document.getElementById('menu');

  btn.addEventListener('click', () => {
    menu.classList.toggle('hidden'); // 表示・非表示を切り替える
  });
</script>
```

### イベントを設定する（クリック、入力など）
```diff_javascript
element.addEventListener('click', () => {
  // クリックされたときの処理
});
```
どんなイベントがある？
・'click'：クリック
・'input'：文字入力されたとき
・'submit'：フォームが送信されたとき

### スタイルを直接変更する
```diff_javascript
element.style.color = 'red';
element.style.backgroundColor = 'lightgray';
```
:::note warn
CSSプロパティ名がキャメルケース
（例：background-color → backgroundColor）になる点に注意！
:::

### 属性（href, srcなど）を操作する
```diff_javascript
element.getAttribute('href');              // 属性の値を取得
element.setAttribute('src', 'img.png');    // 属性を変更
element.removeAttribute('disabled');       // 属性を削除
```
例：画像の切り替え
```diff_html
<img id="mainImage" src="a.png">

<script>
  const img = document.getElementById('mainImage');
  img.setAttribute('src', 'b.png'); // b.pngに変更
</script>
```

### 要素を追加・削除する（createElementの使い方）
```diff_javascript
const newElement = document.createElement('タグ名');
```
これは「新しいHTMLタグをJavaScriptから作る」ための関数です。
例えば、li や div、p などを必要に応じて作れます。

使用例：リストに新しい項目を追加する
```diff_html
<ul id="fruits">
  <li>りんご</li>
</ul>

<script>
  // ① 親要素を取得
  const list = document.getElementById('fruits');

  // ② 子要素（li）を作成
  const newItem = document.createElement('li');

  // ③ テキストを設定
  newItem.textContent = 'みかん';

  // ④ 親要素に追加
  list.appendChild(newItem);
</script>
```
:::note info
ポイント：作成 → 内容設定 → 追加、の3ステップ！
:::

### 要素を削除する→.remove()
```diff_javascript
element.remove();
```

・このメソッドは、その要素自身をHTMLから削除します。
・parent.removeChild(child)でも同じことができますが、remove()の方が直感的で簡単です。


使用例：クリックしたら消える
```diff_html
<p id="msg">このメッセージは消せます</p>
<button id="btn">削除</button>

<script>
  const msg = document.getElementById('msg');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    msg.remove();
  });
</script>
```

:::note info
応用：動的にボタンを追加＆クリックイベントもつける
```diff_html
<div id="container"></div>

<script>
  const container = document.getElementById('container');

  const btn = document.createElement('button');
  btn.textContent = '押してみて';
  
  // イベントも追加できる！
  btn.addEventListener('click', () => {
    alert('こんにちは！');
  });

  container.appendChild(btn);
</script>
```
このように、document.createElement()を使えば、ユーザーの操作に応じて要素をどんどん動的に生成できます。
:::


## 実例「まとめ：基本操作」

| 操作                  | メソッド/プロパティ例 |
|-----------------------|------------------------|
| 要素を取得する        | `querySelector()`、`getElementById()` |
| テキストを変える      | `textContent` |
| HTMLを変更する        | `innerHTML` |
| クラスを操作する      | `classList.add()`、`toggle()`など |
| スタイルを変える      | `style.color`など |
| イベントを設定する    | `addEventListener()` |
| 要素を作って追加する  | `createElement()` + `appendChild()` |
| 要素を削除する        | `remove()` |



## おわりに
DOM操作は、JavaScriptでインタラクティブなWebページを作る上での基本中の基本。
まずはこのチートシートの操作をひとつずつ試して、「何がどう動くのか」を理解するのが第一歩です。