プログラミング

DOM 操作の基本メソッド

最終更新： 20/03/2025
1 分の読み

DOM（Document Object Model）とは、ウェブページのHTMLやXMLの構造をツリー状に表現したもので、JavaScriptを用いてこの構造を操作できます。DOMを操作するために、JavaScriptではさまざまなメソッドが提供されています。その中でも、getElementById、getElementsByClassName、getElementsByTagName、およびquerySelectorは非常に重要なメソッドです。これらのメソッドを使うことで、ページ内の要素を取得したり、操作したりすることができます。本記事では、これらのメソッドについて、動作原理や使い方を詳しく解説します。

1. getElementById メソッド

getElementByIdメソッドは、指定したIDを持つ最初の要素を返します。IDはページ内で一意であるため、このメソッドは必ず一つの要素を返します。もし指定したIDの要素が存在しない場合、このメソッドはnullを返します。

関連記事

使い方

javascript
const element = document.getElementById('exampleId');

ここでは、IDがexampleIdであるHTML要素を取得しています。elementにはその要素が格納され、さらにこの要素に対して操作を行うことができます。

実例

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>getElementById Exampletitle>
head>
<body>
  <div id="exampleId">こんにちは！div>
  <script>
    const element = document.getElementById('exampleId');
    element.style.color = 'blue';  // 文字色を青に変更
  script>
body>
html>

上記のコードでは、getElementByIdを使用して、IDがexampleIdの

要素を取得し、その文字色を青に変更しています。

2. getElementsByClassName メソッド

getElementsByClassNameメソッドは、指定されたクラス名を持つすべての要素を返します。このメソッドは、複数の要素を返すため、結果としてHTMLCollection（配列のようなオブジェクト）が返されます。HTMLCollectionはリアルタイムで更新されるため、ページ内の要素が動的に変化した場合にもその変化が反映されます。

使い方

javascript
const elements = document.getElementsByClassName('exampleClass');

ここでは、クラス名がexampleClassであるすべての要素を取得しています。

実例

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>getElementsByClassName Exampletitle>
head>
<body>
  <div class="exampleClass">要素 1div>
  <div class="exampleClass">要素 2div>
  <div class="exampleClass">要素 3div>
  <script>
    const elements = document.getElementsByClassName('exampleClass');
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.color = 'green';  // すべての要素の文字色を緑に変更
    }
  script>
body>
html>

このコードでは、クラス名がexampleClassのすべての

要素を取得し、その文字色を緑に変更しています。

3. getElementsByTagName メソッド

getElementsByTagNameメソッドは、指定したタグ名を持つすべての要素を取得します。このメソッドもHTMLCollectionを返すため、複数の要素を取得することができます。

使い方

javascript
const elements = document.getElementsByTagName('div');

ここでは、すべての

タグの要素を取得しています。

実例

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>getElementsByTagName Exampletitle>
head>
<body>
  <div>要素 1div>
  <div>要素 2div>
  <div>要素 3div>
  <script>
    const elements = document.getElementsByTagName('div');
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.color = 'red';  // すべてのdiv要素の文字色を赤に変更
    }
  script>
body>
html>

このコードでは、

タグを持つすべての要素を取得し、文字色を赤に変更しています。

4. querySelector メソッド

querySelectorメソッドは、CSSのセレクタを用いて、条件に一致する最初の要素を返します。CSSセレクタを使うことで、より柔軟で強力な選択が可能です。このメソッドは、最初に一致した要素を返すため、複数の要素が一致する場合でも、最初の要素のみが返されます。

使い方

javascript
const element = document.querySelector('.exampleClass');

ここでは、クラス名がexampleClassの最初の要素を取得しています。

実例

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>querySelector Exampletitle>
head>
<body>
  <div class="exampleClass">要素 1div>
  <div class="exampleClass">要素 2div>
  <div class="exampleClass">要素 3div>
  <script>
    const element = document.querySelector('.exampleClass');
    element.style.color = 'purple';  // 最初のexampleClass要素の文字色を紫に変更
  script>
body>
html>

このコードでは、querySelectorを使用してクラス名がexampleClassの最初の要素を取得し、その文字色を紫に変更しています。

5. querySelectorAll メソッド

querySelectorAllメソッドは、CSSセレクタを用いて条件に一致するすべての要素を返します。このメソッドはNodeListというオブジェクトを返し、NodeListは配列のようなオブジェクトですが、配列とは異なる点もあるため注意が必要です。

使い方

javascript
const elements = document.querySelectorAll('.exampleClass');

ここでは、クラス名がexampleClassのすべての要素を取得しています。

実例

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>querySelectorAll Exampletitle>
head>
<body>
  <div class="exampleClass">要素 1div>
  <div class="exampleClass">要素 2div>
  <div class="exampleClass">要素 3div>
  <script>
    const elements = document.querySelectorAll('.exampleClass');
    elements.forEach(element => {
      element.style.color = 'orange';  // すべてのexampleClass要素の文字色をオレンジに変更
    });
  script>
body>
html>

このコードでは、querySelectorAllを使って、クラス名がexampleClassのすべての要素の文字色をオレンジに変更しています。

まとめ

DOMの操作において、getElementById、getElementsByClassName、getElementsByTagName、querySelector、およびquerySelectorAllは、要素を取得するための非常に便利で重要なメソッドです。それぞれのメソッドには異なる特徴があり、目的に応じて使い分けることが求められます。特にquerySelectorとquerySelectorAllは、CSSセレクタを活用できるため、非常に柔軟な操作が可能です。

最終更新： 20/03/2025
1 分の読み
Back to top button