経緯

２週間JavaScriptを学習し、DOM操作について理解が曖昧だったため、自分の記録用として記事を作成した。

DOM

DOM（Document Object Model）とは、JavaScriptで扱えるオブジェクトの集まりのこと。
このdocumentオブジェクトがDOMの世界へのエントリーポイントとなっていて、便利なプロパティやメソッドが多数用意されている。

構造

DOMの構造は、WEBページ（HTML）をツリー状として表現している。このツリーには、文書のすべての要素（HTMLタグ）やテキスト、属性が含まれており、ノードとしてツリーに組み込まれている。

<!DOCTYPE html>
<html>
  <head>
    <title>自己紹介</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>僕は初心者です。</p>
  </body>
</html>

このHTMLは、以下のようなDOMツリーとして表現される。

Document
 └── html
       ├── head
       │     └── title
       │           └── "自己紹介"
       └── body
             ├── h1
             │     └── "こんにちは！"
             └── p
                   └── "僕は初心者です。"

html,head,body,h1,pなどがノードとしてツリーを構成。
それぞれのノードは、親（htmlが親）、子（h1やp）の関係性がある。

使い方

DOMを使うことで、JavaScriptからWebページの内容を動的に操作が可能。以下のように、ページ上のテキストを変更したり、要素を追加することができる。

index.html

<!DOCTYPE html>
<html>
  <body>
    <h1 id="greeting">こんにちは！</h1>
    <button onclick="changeText()">テキストを変更</button>

    <script>
      function changeText() {
        // DOMを通じてh1のテキストを変更
        document.getElementById("greeting").innerText = "こんにちは、世界！";
      }
    </script>
  </body>
</html>

上記の例では、ボタンがクリックされると、テキストが「こんにちは！」から「こんにちは、世界！」に変わる。

<h1 id="greeting">こんにちは！</h1>
<button onclick="changeText()">テキストを変更</button>

が

<h1 id="greeting">こんにちは、世界！</h1>
<button onclick="changeText()">テキストを変更</button>

になる。

それぞれの挙動はざっと以下の通り。

<h1 id="greeting">こんにちは！</h1>
テキストを表示。id=greeting属性は、JavaScriptで扱うために一意な識別子として設定。
<button onclick="changeText()">テキストを変更</button>
「テキストを変更」というラベルを表示。onclick="changeText()" は、このボタンがクリックされたときに changeText()というJavaScriptの関数を実行することを指示。
function changeText()
関数を定義。上述の通り、ボタンがクリックされると、この関数が実行。
document.getElementById("greeting").innerText = "こんにちわ、世界";
document.getElementById() は、HTMLから特定のidを持つ要素を取得するdocumentオブジェクトのメソッド。ここでは、id="greeting" を持つ h1オブジェクトを取得。取得したオブジェクトに対して、innerTextプロパティを「こんにちは、世界！」へ変更。

Chromeのデベロッパーツールで確認

それでは、chromeのデベロッパーツールを活用して中身をみていきたい。デベロッパーツールでオブジェクト構造を確認でき、プロパティのinnerTextが変更されていることが確認できる。

index.htmlをChromeで開く。
デベロッパーツールを開く。Macの場合は、option+command+igaでショートカット。
document.getElementById("greeting")の中身を確認したい。定数testに代入し、console.dir()で表示すると、取得した要素のオブジェクトの中身を確認することができる。
下へスクロールすると、innerText:"こんにちは！が確認できる。
buttonをクリック後、再度同じように取得した要素を確認すると、innerText:"こんにちは、世界！"となっている。innerTextプロパティがクリックイベントにより、変更されたことが確認できた。

要素の取得方法

getElementByIdでidで取得する以外にもタグとクラスで指定できるメソッドもある。

//aタグを複数取得
document.getElementsByTagName('a')

//classがredの要素をを複数取得
document.getElementsByClassName('red')

さらに、柔軟な対応ができるquerySelectorメソッドもある。指定の仕方は、CSSセレクターの書き方と同じ。

//最初に見つけたh1要素を返す
document.querySelector('h1');

//最初に見つけたidがredの要素を返す
document.querySelector('#id');

//最初に見つけたclassがbigを返す
document.querySelector('.big');

//対象となるp要素全てを取得
document.querySelectorAll('p')

要素に対してできる操作

取得した要素に対して、さまざまな操作を行うことができる。例えば：

テキストの変更:innerTextやtextContentを使って、要素内のテキストを変更。

const element = document.getElementById("greeting");
element.innerText = "こんにちは、世界！"; // h1のテキストを変更

スタイルの変更：styleプロパティを使って、要素のCSSスタイルを変更。

const element = document.getElementById("greeting");
element.style.color = "red"; // h1の文字色を赤に変更

クラスの操作：classListを使って、要素のクラスを操作。

const element = document.getElementById("greeting");
element.classList.add("highlight"); // h1にhighlightクラスを追加

イベントの設定：addEventListenerを使って、対象となるイベント（下記はクリック）があった時の挙動を設定。特定のイベントが発生した時、複数の処理を実行したい時にも使用。

const element = document.getElementById("greeting");
element.addEventListener("click", function() {
  alert("クリック！!!");
});

なぜ必要か

JavaScriptを使ってDOMを操作することで、ウェブページに動きやアニメーションを加えることができ、インタラクティブな機能の追加が可能。
インタラクションとは、相互作用」、「双方的」という意味合いで、ユーザーとシステムの間で、リアルタイムにやり取りが可能になり、より魅力的で使いやすいウェブサイト作れる。

最後に

今回の記事を通して、JavaScript の DOM 操作に関する基礎的な知識を整理できた。今後は、これを活かして、さらに複雑なウェブアプリケーションの構築や、より高度なユーザー体験を提供するためのスキルを磨いていきたいと思う。