経緯
２週間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ページの内容を動的に操作が可能。以下のように、ページ上のテキストを変更したり、要素を追加することができる。
<!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 操作に関する基礎的な知識を整理できた。今後は、これを活かして、さらに複雑なウェブアプリケーションの構築や、より高度なユーザー体験を提供するためのスキルを磨いていきたいと思う。