JavaScript初学者向け 5つのDOM操作の種類と使い方

DOM操作とは？

ウェブページ作成などに用いられるHTMLはJavaScriptから見るとツリー構造のデータになっています。
そのデータを操作することをDOM操作といいます。
たくさん種類はあるのですが今回は初学者向けに抜粋して5つ紹介します。

代表的な5つのDOM操作

要素を取得するDOM操作

◇querySelector()

<p id="text">こんにちわ</p>

<script>
const el = document.querySelector("#text");
</script>

idがtextとなっている要素をelという変数に格納している。

テキストを書き換えるDOM操作

◇textContent

<p id="text">こんにちわ</p>

<script>
const el = document.querySelector("#text");
el.textContent = "こんばんわ";
</script>

先ほど格納した変数を使ってこんばんわという文字に変更している。

ボタンをクリックしたら動かすDOM操作

◇addEventListener

<button id="btn">押して</button>
<p id="text">こんにちわ</p>

<script>
const btn = document.querySelector("#btn");
const el = document.querySelector("#text");

btn.addEventListener("click", () => {
  el.textContent = "クリックされた！";
});
</script>

ボタンをクリックするとpタグの文字が変更される。
※addEventListenerが受け取るのはクリックだけではなくinputやsubmitなども受け取れる。

クラスを付け外しするDOM操作

◇classList.toggle()
JavaScript：

text.classList.toggle("active");

CSS：

.active {
  color: red
}

押すたびにCSSのactiveの内容がオンとオフに切り替えられます。

新しい要素を追加するDOM操作

◇createElement() + append()

<ul id="list"></ul>

<script>
const list = document.querySelector("#list");

const li = document.createElement("li");
li.textContent = "新しい項目";
list.append(li);
</script>

ul要素に新しいli要素を生成している

まとめ

使用用途	コード
要素を取得する	querySelector()
テキストを書き換える	textContent
ボタンをクリックしたら動かす	addEventListener
クラスを付け外しする	classList.toggle()
新しい要素を追加する	createElement() + append()

最後に

ここに書いた以外にもDOM操作自体はまだまだ種類があります。
組み合わせも無数にあるのでご自身で調べて使ってみてください。

参考

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

著者: M.Y (株式会社ウィズツーワン)