プログラミング

DOM操作の基本と方法

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

DOMツリーの理解とJavaScriptを使った操作方法

Web開発において、DOM（Document Object Model）とは、HTMLやXML文書の構造を表現するためのモデルです。DOMツリーは、ページ内のすべての要素を階層的に整理したものです。このツリー構造を利用することで、JavaScriptを使ってWebページの内容や構造を動的に変更することができます。この記事では、DOMツリーの基本的な概念から、JavaScriptを使ったDOM操作の方法まで、包括的に解説します。

DOMとは何か？

DOM（Document Object Model）は、ウェブページをプログラムから操作するためのAPI（Application Programming Interface）です。DOMはHTMLやXML文書をツリー構造で表現し、それぞれの要素にアクセスして、変更や操作を行うことを可能にします。DOMは、基本的に親子関係のあるノード（要素）で構成されており、これを「DOMツリー」と呼びます。

関連記事

DOMツリーの基本的な構造は以下のようになります。

  1. ドキュメントノード：HTML文書全体を指します。
  2. 要素ノード：HTMLタグ（例えば、, ,
    ）などが要素ノードです。
  3. 属性ノード：HTMLタグの属性（例えば、class, id, src）が属性ノードに該当します。
  4. テキストノード：タグに囲まれているテキスト（例えば、

    Hello World

    の「Hello World」）がテキストノードです。

DOMツリーの構造例

例えば、以下のようなHTMLがあったとしましょう。

html
html>
<html>
  <head>
    <title>サンプルページtitle>
  head>
  <body>
    <h1>こんにちは、世界！h1>
    <p>これはサンプルページです。p>
  body>
html>

このHTMLは次のようにDOMツリーとして表されます。

markdown
- Document
  - html
    - head
      - title
        - "サンプルページ"
    - body
      - h1
        - "こんにちは、世界！"
      - p
        - "これはサンプルページです。"

JavaScriptを使ってDOMを操作する方法

JavaScriptでは、documentオブジェクトを使ってDOMにアクセスし、要素を操作できます。以下に代表的な操作方法を示します。

1. 要素の取得

DOMツリー内の特定の要素を取得するために、以下のメソッドを使用します。

  • getElementById()：ID属性で要素を取得
  • getElementsByClassName()：クラス名で要素を取得
  • getElementsByTagName()：タグ名で要素を取得
  • querySelector()：CSSセレクタを使って最初の要素を取得
  • querySelectorAll()：CSSセレクタを使って一致するすべての要素を取得
javascript
// IDで要素を取得
let heading = document.getElementById("main-heading");

// クラス名で要素を取得
let paragraphs = document.getElementsByClassName("text");

// タグ名で要素を取得
let divs = document.getElementsByTagName("div");

// CSSセレクタで最初の要素を取得
let firstParagraph = document.querySelector("p");

// CSSセレクタで一致するすべての要素を取得
let allParagraphs = document.querySelectorAll("p");

2. 要素の変更

取得した要素を操作して、HTMLの内容を動的に変更することができます。

  • innerHTML：要素内のHTMLコンテンツを変更
  • textContent：要素内のテキストを変更
  • setAttribute()：属性を設定
  • style：インラインスタイルを変更
javascript
// 要素内のテキストを変更
heading.textContent = "新しい見出し";

// 要素内のHTMLを変更
heading.innerHTML = "新しい見出し";

// 属性を変更
let link = document.getElementById("my-link");
link.setAttribute("href", "https://example.com");

// スタイルを変更
let divElement = document.querySelector("div");
divElement.style.backgroundColor = "blue";

3. 要素の追加・削除

DOMに新しい要素を追加したり、既存の要素を削除することもできます。

  • createElement()：新しい要素を作成
  • appendChild()：要素を追加
  • removeChild()：要素を削除
  • replaceChild()：要素を置き換え
javascript
// 新しい要素を作成
let newParagraph = document.createElement("p");
newParagraph.textContent = "新しい段落";

// 要素を追加
document.body.appendChild(newParagraph);

// 要素を削除
document.body.removeChild(newParagraph);

// 要素を置き換え
let oldParagraph = document.querySelector("p");
document.body.replaceChild(newParagraph, oldParagraph);

4. イベントリスナーの追加

DOM要素に対してユーザーの操作を検知し、適切な処理を行うためには、イベントリスナーを追加することができます。

  • addEventListener()：指定したイベントが発生したときに処理を実行
javascript
// ボタンがクリックされたときの処理
let button = document.getElementById("my-button");
button.addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

まとめ

DOM（Document Object Model）は、HTML文書をプログラムから操作するための強力な仕組みです。JavaScriptを使えば、DOMツリー内の要素を簡単に取得し、変更・追加・削除することができます。これにより、動的でインタラクティブなWebページを作成することが可能になります。

本記事では、DOMの基本的な構造から、JavaScriptを用いたDOM操作の具体的な方法まで幅広く解説しました。これを活用することで、Web開発の幅が広がり、より洗練されたインタラクションを提供できるようになるでしょう。

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