前回はユーティリティ関数について紹介しました。
Javascript(18)ユーティリティ関数の使い方
今回は、ユーティリティ関数の使い方について紹介していきます。この関数はアプリ開発に役立ちます。是非覚えましょう。
kamechannel.com
2025.02.06
今回はDOMの操作について紹介していきます。
【もっと詳しく知りたい人は是非これを読んでください！！】
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
ブラウザ操作を自由自在に！JavaScriptでDOMを操作する基本と応用
Web開発において、ユーザーの操作に応じてページの内容を動的に変更できることは重要です。そのために活用するのが DOM（Document Object Model） です。JavaScriptを使えば、ページの要素を自由自在に操作できます。
この記事では、JavaScriptによるDOM操作の基本から応用テクニックまで、わかりやすく解説します。
1. DOMとは？
DOMとは、HTMLやXMLドキュメントをプログラムから操作できるようにした オブジェクトの構造 のことです。JavaScriptを使ってHTMLの要素を追加・削除したり、CSSを変更したりすることで、よりインタラクティブなWebページを作成できます。
2. 要素の取得
JavaScriptでは、さまざまな方法でHTML要素を取得できます。
1. getElementById()（IDで取得）
const title = document.getElementById("main-title");
console.log(title.innerText); // 取得した要素のテキストを表示
2. getElementsByClassName()（クラス名で取得）
const items = document.getElementsByClassName("item");
console.log(items[0].innerText); // クラス名が「item」の最初の要素のテキストを表示
3. querySelector()（CSSセレクタで取得）
const firstItem = document.querySelector(".item");
console.log(firstItem.innerText);
4. querySelectorAll()（複数の要素を取得）
const allItems = document.querySelectorAll(".item");
allItems.forEach(item => console.log(item.innerText));
3. 要素の変更
取得した要素の内容やスタイルを変更するには、以下のプロパティを使用します。
1. innerText（テキストの変更）
document.getElementById("main-title").innerText = "新しいタイトル";
2. innerHTML（HTMLを変更）
document.getElementById("content").innerHTML = "<strong>太字のテキスト</strong>";
3. style（CSSの変更）
document.getElementById("main-title").style.color = "red";
4. 要素の追加と削除
ページに新しい要素を追加・削除する方法を紹介します。
1. createElement()（要素の作成）
const newItem = document.createElement("li");
newItem.innerText = "新しい項目";
document.getElementById("list").appendChild(newItem);
2. removeChild()（要素の削除）
const list = document.getElementById("list");
list.removeChild(list.lastElementChild);
5. イベントリスナーの活用
ボタンのクリックなどのイベントを処理する方法を紹介します。
1. addEventListener()
document.getElementById("myButton").addEventListener("click", () => {
alert("ボタンがクリックされました！");
});
2. マウスイベントの活用
const box = document.getElementById("box");
box.addEventListener("mouseover", () => {
box.style.backgroundColor = "lightblue";
});
6. 応用テクニック
1. クラスの操作（classList）
document.getElementById("box").classList.add("active");
document.getElementById("box").classList.remove("inactive");
2. アニメーションとトランジション
const button = document.getElementById("animate-button");
button.addEventListener("click", () => {
button.style.transform = "scale(1.2)";
setTimeout(() => button.style.transform = "scale(1)", 300);
});
まとめ
JavaScriptを使ったDOM操作をマスターすれば、より魅力的なWebサイトを作ることができます。この記事で学んだ以下のポイントを活用して、実際のプロジェクトに取り入れてみましょう。
- 要素の取得方法（
getElementById/querySelectorなど） - 要素の変更（テキスト・スタイル・HTMLの変更）
- 要素の追加と削除（
createElement/removeChild） - イベントリスナーの活用（
addEventListener） - クラスの操作やアニメーションの適用
JavaScriptのDOM操作を使いこなして、ダイナミックなWebページを作成してみましょう。
参考リンク
以上がDOMの操作の紹介になります。
次回はNode.jsについて紹介します。
