JavaScript

JavaScriptのDOM操作について解説

JavaScriptのDOM（Document Object Model）操作について詳しく解説します。DOM操作は、JavaScriptを使ってHTMLやXMLドキュメントの構造、スタイル、および内容を操作するための方法です。

DOMとは？

DOM（Document Object Model）は、HTMLまたはXML文書の構造を表現するプログラミングインターフェースです。DOMは、文書をツリー構造として表現し、各ノードが文書の一部を表しています。

DOM要素の取得

JavaScriptを使ってDOM要素を取得するための主な方法は以下の通りです：

  1. getElementById
  2. getElementsByClassName
  3. getElementsByTagName
  4. querySelector
  5. querySelectorAll

1. getElementById

getElementByIdは、指定されたIDを持つ要素を取得します。IDは文書内で一意である必要があります。

const element = document.getElementById("myElement");
console.log(element);

2. getElementsByClassName

getElementsByClassNameは、指定されたクラス名を持つすべての要素を取得します。結果はライブHTMLコレクションとして返されます。

const elements = document.getElementsByClassName("myClass");
console.log(elements);

3. getElementsByTagName

getElementsByTagNameは、指定されたタグ名を持つすべての要素を取得します。結果はライブHTMLコレクションとして返されます。

const elements = document.getElementsByTagName("div");
console.log(elements);

4. querySelector

querySelectorは、指定されたCSSセレクタにマッチする最初の要素を取得します。

const element = document.querySelector(".myClass");
console.log(element);

5. querySelectorAll

querySelectorAllは、指定されたCSSセレクタにマッチするすべての要素を取得します。結果はNodeListとして返されます。

const elements = document.querySelectorAll(".myClass");
console.log(elements);

DOM要素の操作

取得した要素の内容や属性、スタイルを変更する方法を紹介します。

1. テキストコンテンツの変更

要素のテキストコンテンツを変更するには、textContentまたはinnerTextプロパティを使用します。

const element = document.getElementById("myElement");
element.textContent = "新しいテキスト";

2. HTMLコンテンツの変更

要素のHTMLコンテンツを変更するには、innerHTMLプロパティを使用します。

const element = document.getElementById("myElement");
element.innerHTML = "<strong>新しいHTML</strong>";

3. 属性の変更

要素の属性を取得、設定、削除するには、getAttribute、setAttribute、removeAttributeメソッドを使用します。

const element = document.getElementById("myElement");
element.setAttribute("title", "新しいタイトル");
const title = element.getAttribute("title");
console.log(title);  // 新しいタイトル
element.removeAttribute("title");

4. スタイルの変更

要素のスタイルを変更するには、styleプロパティを使用します。

const element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";

DOM要素の作成と削除

新しい要素を作成し、既存の要素に追加したり、既存の要素を削除したりする方法を紹介します。

1. 要素の作成

新しい要素を作成するには、createElementメソッドを使用します。

const newElement = document.createElement("div");
newElement.textContent = "新しい要素";
document.body.appendChild(newElement);

2. 要素の追加

新しい要素を既存の要素に追加するには、appendChildやinsertBeforeメソッドを使用します。

const parentElement = document.getElementById("parentElement");
const newElement = document.createElement("div");
newElement.textContent = "新しい要素";
parentElement.appendChild(newElement);

3. 要素の削除

既存の要素を削除するには、removeChildメソッドを使用します。

const parentElement = document.getElementById("parentElement");
const childElement = document.getElementById("childElement");
parentElement.removeChild(childElement);

イベントの追加

要素にイベントリスナーを追加して、ユーザーのアクションに応じて特定のコードを実行する方法を紹介します。

1. addEventListener

addEventListenerメソッドを使用してイベントリスナーを追加します。

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
    alert("ボタンがクリックされました！");
});

まとめ

  • DOM要素の取得: getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAllを使用します。
  • DOM要素の操作: テキストコンテンツ、HTMLコンテンツ、属性、スタイルを変更します。
  • DOM要素の作成と削除: 新しい要素を作成し、既存の要素に追加したり、既存の要素を削除したりします。
  • イベントの追加: addEventListenerメソッドを使用してイベントリスナーを追加します。

これでJavaScriptのDOM操作についての基本的な理解が深まったと思います。

スポンサーリンク

-JavaScript