JavaScriptの基本的なDOM操作

Posted on by

Document Object Model (DOM) は、
ウェブページの構造をプログラムから操作するためのインターフェースを提供します。
DOMを操作することで、JavaScriptを使ってウェブページの内容を動的に変更したり、
ユーザーインタラクションに応じてページを更新することができます。
この記事では、JavaScriptでの基本的なDOM操作について詳しく解説します。

DOMの基本構造と概念

DOMは、HTMLやXML文書をオブジェクトツリーとして表現します。
各要素、属性、テキストは、DOMツリーのノードとして扱われます。
JavaScriptを使用してこれらのノードにアクセスし、操作を行うことができます。

基本的なDOMノードの種類

Elementノード

HTMLタグ（例: <div>, <p>, <a>）

Attributeノード

HTML属性（例: class, id, href）

Textノード

テキストコンテンツ

DOM要素の選択

DOM操作の最初のステップは、操作したい要素を選択することです。
JavaScriptでは、いくつかの方法で要素を選択できます。

getElementById

getElementByIdメソッドは、指定されたIDを持つ要素を返します。
IDはユニークである必要があるため、このメソッドは1つの要素しか返しません。

let header = document.getElementById("main-header");
console.log(header);

getElementsByClassName

getElementsByClassNameメソッドは、指定されたクラス名を持つ全ての要素を配列のようなHTMLCollectionとして返します。

let items = document.getElementsByClassName("list-item");
console.log(items);

getElementsByTagName

getElementsByTagNameメソッドは、
指定されたタグ名を持つ全ての要素をHTMLCollectionとして返します。

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);

querySelector

querySelectorメソッドは、指定されたCSSセレクターに一致する最初の要素を返します。

let firstItem = document.querySelector(".list-item");
console.log(firstItem);

querySelectorAll

querySelectorAllメソッドは、
指定されたCSSセレクターに一致する全ての要素をNodeListとして返します。

let allItems = document.querySelectorAll(".list-item");
console.log(allItems);

DOM要素の操作

DOM要素を選択した後は、その内容や属性を操作することができます。

テキストコンテンツの操作

textContent

要素のテキスト内容を取得または設定します。

let heading = document.getElementById("main-header");
heading.textContent = "Welcome to My Website";

innerText

見た目に基づいたテキスト内容を取得または設定します。
textContentと異なり、CSSによる非表示のテキストは取得しません。

heading.innerText = "Hello World";

innerHTML

要素のHTMLコンテンツを取得または設定します。
HTMLタグを含めて設定できるため、XSS攻撃に対して注意が必要です。

let content = document.getElementById("content");
content.innerHTML = "<p>This is a new paragraph.</p>";

属性の操作

getAttribute

指定された属性の値を取得します。

let link = document.querySelector("a");
let href = link.getAttribute("href");
console.log(href);

setAttribute

指定された属性の値を設定します。

link.setAttribute("href", "https://example.com");

removeAttribute

指定された属性を削除します。

link.removeAttribute("target");

クラスの操作

className

要素のクラス名を取得または設定します。

let box = document.querySelector(".box");
box.className = "new-class";

classList

要素のクラスを操作するためのメソッドを提供します。

box.classList.add("highlight");
box.classList.remove("highlight");
box.classList.toggle("active"); // クラスの有無に応じて追加または削除
let hasClass = box.classList.contains("active");
console.log(hasClass);

スタイルの操作

style

インラインスタイルを設定します。

let button = document.querySelector("button");
button.style.backgroundColor = "blue";
button.style.fontSize = "20px";

getComputedStyle

要素の計算されたスタイルを取得します。

let computedStyle = window.getComputedStyle(button);
console.log(computedStyle.color);

DOM要素の追加と削除

DOMツリーに要素を追加したり削除したりすることも可能です。

要素の作成

createElement

新しい要素を作成します。

let newDiv = document.createElement("div");
newDiv.textContent = "Hello, new element!";

要素の追加

appendChild

親要素の最後に子要素を追加します。

document.body.appendChild(newDiv);

insertBefore

特定の要素の前に新しい要素を挿入します。

let parent = document.getElementById("parent-element");
let referenceNode = document.getElementById("reference-node");
parent.insertBefore(newDiv, referenceNode);

insertAdjacentHTML

特定の位置にHTMLを挿入します。

let container = document.getElementById("container");
container.insertAdjacentHTML("beforeend", "<p>New paragraph added!</p>");

要素の削除

removeChild

親要素から指定された子要素を削除します。

let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.removeChild(childElement);

remove

要素自身を削除します（モダンブラウザ向け）。

childElement.remove();

イベントハンドリング

DOM操作では、ユーザーの操作（クリック、キーボード入力など）に応じて
イベントを処理することが重要です。

イベントリスナーの追加

addEventListener

指定されたイベントが発生したときに実行される関数を登録します。

let button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

イベントの削除

let handleClick = function() {
  alert("Button clicked!");
};

button.addEventListener("click", handleClick);

// イベントリスナーの削除
button.removeEventListener("click", handleClick);

イベントオブジェクト

イベントが発生すると、イベントに関する情報を持つオブジェクトがイベントハンドラに渡されます。

button.addEventListener("click", function(event) {
  console.log("Clicked at coordinates:", event.clientX, event.clientY);
});

イベントの伝播

イベントはバブリング（内側から外側へ）またはキャプチャリング（外側から内側へ）することがあります。
これを制御するために、stopPropagationやstopImmediatePropagationメソッドを使用します。

button.addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Button clicked, but event propagation stopped.");
});

デフォルトの動作の防止

フォームの送信やリンクの移動など、デフォルトのブラウザ動作を防ぐためには、
preventDefaultメソッドを使用します。

let link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault();
  console.log("Link click prevented.");
});

非同期操作とDOM

AJAXやFetch APIを使った非同期操作は、サーバーからデータを取得し、
それをDOMに反映させるために使われます。

XMLHttpRequestによる非同期操作

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let posts = JSON.parse(xhr.responseText);
    console.log(posts);
  }
};
xhr.send();

Fetch APIによる非同期操作

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(posts => {
    console.log(posts);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

まとめ

JavaScriptのDOM操作は、ウェブページのインタラクティブ性を高め、
ユーザー体験を向上させるための重要な技術です。
基本的なDOMの構造を理解し、要素の選択、操作、
イベントハンドリングなどのスキルを習得することで、
より動的で魅力的なウェブサイトを構築することができます。
この記事を参考に、実際のプロジェクトでこれらの技術を活用してみてください。