【JavaScript】DOMとは？DOM操作についてエンジニアがわかりやすく解説！

はじめに

この記事の目的

この記事の目的は、JavaScriptを使用して、WebページのDOMを操作する方法を学ぶことです。

DOMは、Webページの構造を表現するためのツリー状のオブジェクトであり、JavaScriptを使用して、このDOMを操作することで、Webページの動的な構築や動作を実現できます。

前提条件

この記事を理解するには、以下の知識が必要です。

• HTMLの基本的な構造やタグの意味
• CSSによるスタイルの設定方法
• JavaScriptの基本的な構文や変数、関数の定義方法

DOMとは何か？

DOMの定義

DOMとは、Document Object Modelの略で、WebページのHTML要素やXML要素を表すオブジェクトの階層構造を定義したものです。DOMは、JavaScriptやその他のスクリプト言語を使用して、Webページの要素を取得、作成、変更、削除するための手段を提供します。

DOMツリーの構造

DOMは、ツリー構造を持っており、HTML要素やXML要素を親子関係で表現します。つまり、要素は他の要素を含むことができ、また、他の要素によって含まれることができます。DOMツリーのトップには、HTMLドキュメント全体を表すDocumentオブジェクトがあります。

DOM要素の特徴

DOM要素は、HTML要素やXML要素を表現するために使用されます。DOM要素には、要素の属性、テキストコンテンツ、子要素、およびスタイルなどの情報が含まれます。DOM要素はJavaScriptによって取得、作成、変更、および削除することができます。また、DOM要素には、イベントハンドラを設定することもできます。

JavaScriptによるDOM操作の基本

Webページ上のHTML要素をJavaScriptで操作するには、Document Object Model（DOM）を利用します。

DOMは、WebページのHTML要素を、JavaScriptが利用しやすいオブジェクトモデルに変換したものです。

HTML要素の取得方法

DOMを操作する前に、HTML要素を取得する必要があります。以下の3つの方法でHTML要素を取得することができます。

1. IDを使用した取得方法

HTML要素にIDが設定されている場合、getElementById()メソッドを使用してその要素を取得することができます。

例えば、以下のようにHTML要素にIDを設定した場合

<div id="myDiv">Hello, world!</div>

以下のように、getElementById()メソッドを使用して要素を取得できます。

const element = document.getElementById("myDiv");
// または
const element = document.querySelector('#myDiv')

2. クラス名を使用した取得方法

HTML要素にクラス名が設定されている場合、getElementsByClassName()メソッドを使用してその要素を取得することができます。

例えば、以下のようにHTML要素にクラス名を設定した場合

<div class="myClass">Hello, world!</div>

以下のように、getElementsByClassName()メソッドを使用して要素を取得できます。

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

getElementsByClassName()メソッドは、複数の要素を返すことができるため、返り値は要素の配列になります。

3. タグ名を使用した取得方法

HTML要素のタグ名を使用して、その要素を取得することもできます。getElementsByTagName()メソッドを使用して、指定したタグ名を持つすべての要素を取得することができます。

例えば、以下のようにHTML要素を定義した場合

<div>Hello, world!</div>

以下のように、getElementsByTagName()メソッドを使用して要素を取得できます。

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

要素の属性の取得・変更方法

取得したHTML要素の属性を取得したり、変更したりすることができます。

要素の属性を取得するには、getAttribute()メソッドを使用します。例えば、以下のようにHTML要素を定義した場合

<img src="example.jpg" alt="Example Image">

以下のように、getAttribute()メソッドを使用して、属性を取得できます。

const src = document.getElementsByTagName("img")[0].getAttribute("src");

要素の属性を変更するには、setAttribute()メソッドを使用します。

例えば、以下のようにHTML要素のid属性を変更する場合は、以下のように記述します。

const myElement = document.getElementById("myElement");
myElement.setAttribute("id", "newIdValue");

この場合、setAttribute()メソッドには、変更したい属性名（ここでは”id”）と、新しい属性値（ここでは”newIdValue”）を渡しています。

要素の属性を取得するには、getAttribute()メソッドを使用します。

例えば、以下のようにHTML要素のhref属性を取得する場合は、以下のように記述します。

const linkElement = document.getElementById("myLink");
const linkHref = linkElement.getAttribute("href");

この場合、getAttribute()メソッドには、取得したい属性名（ここでは”href”）を渡しています。getAttribute()メソッドは、指定した属性の値を返します。

また、要素の属性を削除するには、removeAttribute()メソッドを使用します。例えば、以下のようにHTML要素のclass属性を削除する場合は、以下のように記述します。

const myElement = document.getElementById("myElement");
myElement.removeAttribute("class");

この場合、removeAttribute()メソッドには、削除したい属性名（ここでは”class”）を渡しています。removeAttribute()メソッドは、指定した属性を削除します。

要素のスタイルの変更方法

要素のスタイルを変更する方法には、以下のようなものがあります。

1. styleプロパティを使用する方法

要素のstyleプロパティを変更することで、要素のスタイルを変更できます。例えば、以下のように書くことで、idが”myDiv”の要素の背景色を赤色に変更できます。

document.getElementById("myDiv").style.backgroundColor = "red";

2. classListプロパティを使用する方法

要素にクラスを追加することで、複数のスタイルを一度に適用することができます。例えば、以下のように書くことで、idが”myDiv”の要素に”highlight”というクラスを追加し、そのクラスに設定されたスタイルを適用できます。

document.getElementById("myDiv").classList.add("highlight");

3. CSSのスタイルシートを変更する方法

CSSのスタイルシートを変更することで、全体のスタイルを一度に変更することができます。例えば、以下のように書くことで、idが”myDiv”の要素の背景色を赤色に変更できます。

document.styleSheets[0].addRule("#myDiv", "background-color: red");

ただし、この方法は使用するCSSのスタイルシートが明確である必要があります。

以上のように、JavaScriptを使用して要素のスタイルを変更する方法は複数あります。適切な方法を選択することで、効率的なスタイル変更を実現することができます。

実用的なDOM操作の例

JavaScriptを使用したDOM操作は、Web開発において非常に重要な役割を果たします。

以下では、実際に使われるDOM操作の例を紹介します。

フォームのバリデーション

フォームの入力内容をチェックする際には、JavaScriptを使用してフォームの各要素の値を取得し、正しい形式であるかを検証することが一般的です。

例えば、必須項目が入力されているかどうかをチェックしたり、メールアドレスの形式が正しいかどうかをチェックすることができます。

必須項目のチェックの例

function validateForm() {
  const x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("名前を入力してください");
    return false;
  }
}

メールアドレスの形式チェックの例

function validateEmail() {
  const x = document.forms["myForm"]["email"].value;
  const atpos = x.indexOf("@");
  const dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("正しいメールアドレスを入力してください");
    return false;
  }
}

要素の追加・削除

DOMを使用すると、Webページの特定の場所に要素を追加または削除することができます。

例えば、JavaScriptを使用して、リスト要素やテーブルの行を動的に追加したり削除したりすることができます。

リスト要素の追加の例

function addToList() {
  let node = document.createElement("li");
  let textnode = document.createTextNode("新しい項目");
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}

リスト要素の削除の例

function removeFromList() {
  const list = document.getElementById("myList");
  list.removeChild(list.childNodes[0]);
}

テーブルの行の追加の例

function addToTable() {
  let table = document.getElementById("myTable");
  let row = table.insertRow(1);
  let cell1 = row.insertCell(0);
  let cell2 = row.insertCell(1);
  cell1.innerHTML = "新しいセル1";
  cell2.innerHTML = "新しいセル2";
}

テーブルの行の削除の例

function removeFromTable() {
  document.getElementById("myTable").deleteRow(1);
}

イベントの設定方法

JavaScriptを使って、HTML要素にイベントを設定することができます。

イベントは、マウスオーバー、マウスアウト、クリック、フォーム送信など、さまざまなアクションに関連付けられます。ここでは、イベントを設定する方法について説明します。

addEventListener()メソッドを使ったイベントの設定

addEventListener()メソッドを使うと、HTML要素にイベントを設定することができます。

このメソッドは、以下のような構文を持ちます。

element.addEventListener(event, function, useCapture);

• element: イベントを設定するHTML要素を指定します。
• event: イベントの種類を指定します。たとえば、クリックイベントは「click」、マウスオーバーは「mouseover」などです。
• function: イベントが発生したときに実行する関数を指定します。
• useCapture: オプションの引数で、trueまたはfalseを指定できます。trueを指定すると、イベントがキャプチャーフェーズで処理されます。デフォルト値はfalseです。

例えば、以下のコードは、「click」イベントが発生したときに、id属性が「button」の要素のテキストを変更します。

<button id="button">Click me!</button>

<script>
  const button = document.getElementById('button');
  
  button.addEventListener('click', function() {
    button.textContent = 'Clicked!';
  });
</script>

イベントの設定においては、これらの注意点に留意することが必要です。パフォーマンスの問題を回避するためには、必要最低限のイベントハンドラのみを設定し、冗長な処理や無限ループを避けるようにしましょう。

また、信頼できるソースから提供されたコードを使用することで、セキュリティの問題を回避することができます。さらに、ブラウザの互換性に留意することも重要です。各ブラウザのドキュメントを確認して、サポートされるイベントに留意することが望ましいです。

フォーム送信イベントは、フォームが送信された際に発生します。このイベントを利用することで、フォームが送信された際に特定の処理を行うことができます。

フォーム送信イベントを設定する方法は、submitメソッドを使用することです。submitメソッドは、フォームのsubmitイベントを発生させることができます。

例えば、以下のようなHTMLフォームがあるとします。

<form id="my-form">
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <input type="submit" value="送信">
</form>

このフォームに対して、フォームが送信された際にアラートを表示するイベントを設定するには、以下のようなJavaScriptコードを記述します。

const form = document.querySelector('#my-form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // フォームのデフォルトの動作（ページ遷移）をキャンセル
  alert('フォームが送信されました！');
});

このコードでは、フォームのsubmitイベントに対して、イベントリスナーを追加しています。イベントリスナーのコールバック関数の中で、event.preventDefault()を呼び出すことで、フォームのデフォルトの動作であるページ遷移をキャンセルしています。そして、アラートを表示しています。

フォーム送信イベントを利用することで、フォームの送信前に入力内容のチェックを行うなど、様々な処理を実行することができます。ただし、フォーム送信イベントは、必要以上に多用すると、ユーザー体験の悪化につながることがあるため、注意が必要です。

DOM操作の注意点とトラブルシューティング

DOM操作を行う際には、以下のような注意点やトラブルシューティングが必要となることがあります。

以上のように、DOM操作には注意点やトラブルシューティングが必要ですが、適切な実装方法や対策を行うことで、スムーズな開発が可能となります。

まとめ

DOM操作は、Web開発において非常に重要な役割を担っています。JavaScriptを用いることで、Webページ上のHTML要素に対して様々な操作を行うことができます。

この記事では、DOMの定義やDOMツリーの構造、DOM要素の特徴、JavaScriptによるDOM操作の基本的な方法などについて解説してきました。

また、実用的な例として、フォームのバリデーションや要素の追加・削除、イベントの設定方法などを紹介しました。