JavaScriptでよく使うDOM操作のプロパティやメソッドを、チートシート形式でまとめた記事です。Web制作やフロントエンド開発で頻出のDOM操作をコード付きで紹介します。学習中の方や実務でサッと見返したい方向けに作成しました！
📖 目次
対象読者
・JavaScriptの基礎を学んでいる人
・DOM操作をコードで理解したい人
・よく使うメソッドやプロパティを一覧で見たい人
DOMとは？
DOM（Document Object Model）は、WebページのHTMLをJavaScriptから操作できるようにした仕組みです。
例えば：
・ボタンをクリックしたら文字を変える
・特定の画像だけ表示を消す
・入力フォームの中身を取得する
こういったことは全部DOM操作で行います。
DOM操作チートシート【よく使う操作を解説付きで紹介】
要素を取得する（基本中の基本）
DOM操作のスタートは「HTMLのどの要素を操作するかを取得すること」。
よく使う取得メソッド
document.getElementById('myId'); // id属性で取得
document.querySelector('.myClass'); // CSSセレクタで1個だけ取得
document.querySelectorAll('.myClass'); // CSSセレクタで複数取得
解説
querySelectorAllはCSSと同じ書き方で対象を探せるので、実務で一番よく使われます。
複数の要素を取得したときは、NodeList（配列みたいなもの）が返ってきます。
使用例
<ul>
<li class="item">りんご</li>
<li class="item">みかん</li>
</ul>
<script>
const items = document.querySelectorAll('.item');
items.forEach(item => {
console.log(item.textContent);
});
</script>
forEachが使える＝ループ処理でまとめて処理ができる、というのが便利ポイント！
テキスト・HTMLを変更する
element.textContent = 'こんにちは'; // テキストだけ変える
element.innerHTML = '<b>強調</b>'; // HTMLも含めて変更
違いは？
textContentはテキストのみを扱うので、安全かつ速い
innerHTMLはHTMLタグごと入れ替えるので、使い方を間違えるとセキュリティリスクあり
クラスを操作する（スタイル切り替えなど）
element.classList.add('active'); // クラスを追加
element.classList.remove('hidden'); // クラスを削除
element.classList.toggle('open'); // ある/なしを切り替え
element.classList.contains('done'); // 含んでいるかチェック（true/false）
<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>
イベントを設定する（クリック、入力など）
element.addEventListener('click', () => {
// クリックされたときの処理
});
どんなイベントがある？
・'click'：クリック
・'input'：文字入力されたとき
・'submit'：フォームが送信されたとき
スタイルを直接変更する
element.style.color = 'red';
element.style.backgroundColor = 'lightgray';
CSSプロパティ名がキャメルケース
（例：background-color → backgroundColor）になる点に注意！
属性（href, srcなど）を操作する
element.getAttribute('href'); // 属性の値を取得
element.setAttribute('src', 'img.png'); // 属性を変更
element.removeAttribute('disabled'); // 属性を削除
例：画像の切り替え
<img id="mainImage" src="a.png">
<script>
const img = document.getElementById('mainImage');
img.setAttribute('src', 'b.png'); // b.pngに変更
</script>
要素を追加・削除する（createElementの使い方）
const newElement = document.createElement('タグ名');
これは「新しいHTMLタグをJavaScriptから作る」ための関数です。
例えば、li や div、p などを必要に応じて作れます。
使用例：リストに新しい項目を追加する
<ul id="fruits">
<li>りんご</li>
</ul>
<script>
// ① 親要素を取得
const list = document.getElementById('fruits');
// ② 子要素（li）を作成
const newItem = document.createElement('li');
// ③ テキストを設定
newItem.textContent = 'みかん';
// ④ 親要素に追加
list.appendChild(newItem);
</script>
ポイント：作成 → 内容設定 → 追加、の3ステップ！
要素を削除する→.remove()
element.remove();
・このメソッドは、その要素自身をHTMLから削除します。
・parent.removeChild(child)でも同じことができますが、remove()の方が直感的で簡単です。
使用例：クリックしたら消える
<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>
応用：動的にボタンを追加＆クリックイベントもつける
<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ページを作る上での基本中の基本。
まずはこのチートシートの操作をひとつずつ試して、「何がどう動くのか」を理解するのが第一歩です。