JavaScript基礎｜よく使うDOM操作(HTML要素の取得・追加・削除・変更)

JavaScriptのDOM操作できること

JavaScriptを使うことで、HTMLの構造や中身を動的に変更することができる。
クリックで要素を追加したり、フォームの入力に応じて内容を書き換えたりすることが可能。

🔍 要素の取得

要素の取得方法はquerySelectorとgetElementByIdとgetElementsByClassNameの３種類がある。

それぞれ取得する際の（）の中に入れるID名やClass名の記述方法に違いがあるので要注意。間違えて入力すると要素を取得できない⚠️

✅ 【ID指定で1つの要素を取得】

// getElementById：ID名をそのまま指定（#は不要）
const element1 = document.getElementById("my-id");

// querySelector：CSSセレクタ形式で指定（#が必要）
const element2 = document.querySelector("#my-id");

✅ 【クラス名で複数の要素を取得】

// getElementsByClassName：配列っぽいHTMLCollectionが返る
const elements1 = document.getElementsByClassName("item");

// querySelectorAll：NodeListが返る。forEachが使える
const elements2 = document.querySelectorAll(".item");

✅ 【タグ名で取得】

// getElementsByTagName：タグ名で全て取得
const divs1 = document.getElementsByTagName("div");

// querySelectorAll：CSSのようにタグ＋条件もOK
const divs2 = document.querySelectorAll("div.container");

➕ 要素の追加

const newElement = document.createElement("タグ名");
newElement.textContent = "テキスト内容";
親要素.appendChild(newElement);

📝例文：

const list = document.querySelector("ul");
const li = document.createElement("li");
li.textContent = "新しい項目";
list.appendChild(li);

❌ 要素の削除

📝例文：

//HTML
<ul id="todo-list">
  <li class="item">やること① <button class="delete-btn">削除</button></li>
  <li class="item">やること② <button class="delete-btn">削除</button></li>
</ul>

// すべての削除ボタンを取得
const deleteButtons = document.querySelectorAll(".delete-btn");

// 各ボタンにクリックイベントを設定
deleteButtons.forEach((btn) => {
  btn.addEventListener("click", () => {
    // 親の <li> を削除
    btn.parentElement.remove();
  });
});

🔁 要素の変更

• 内容の書き換え：

element.textContent = "新しいテキスト";

• 属性の変更：

element.setAttribute("class", "new-class");

• スタイルの変更：

element.style.color = "red";