JavaScriptのDOMを使った要素の取得をわかりやすく解説！初心者向け完全ガイド

新人と先輩の会話形式で理解しよう

新人

「JavaScriptでHTMLの要素を操作するにはどうしたらいいんですか？」

先輩

「HTMLの要素はDOMを使って取得し、その後で操作ができます。基本的な使い方を一緒に見ていきましょう！」

1. DOMとは？

DOM（ドキュメントオブジェクトモデル）とは、HTML文書をプログラムから操作するための仕組みです。JavaScriptを使ってページ内の要素を動的に変更したり、データを表示したりするための基本となる概念です。

たとえば、ボタンをクリックしたときに文字が変わったり、入力フォームに入力した内容をリアルタイムで表示したりするのもDOMを使って行います。

2. DOMを使ってHTML要素を取得する方法

JavaScriptでは、document.querySelectorやdocument.querySelectorAllを使って、HTMLの要素を簡単に取得できます。

2.1 単一の要素を取得する（`querySelector`）

document.querySelectorを使うと、指定したCSSセレクタに一致する最初の要素を取得できます。


<script>
document.write("<h3>単一の要素を取得する例</h3>");

let heading = document.querySelector("h1");
document.write("取得した見出し: " + heading.innerHTML + "<br>");
</script>

ブラウザ表示

このコードでは、querySelectorを使って最初のh1要素を取得し、その中のテキストを表示しています。

2.2 複数の要素を取得する（`querySelectorAll`）

document.querySelectorAllを使うと、指定したCSSセレクタに一致するすべての要素を配列のようにまとめて取得できます。


<script>
document.write("<h3>複数の要素を取得する例</h3>");

let listItems = document.querySelectorAll("ul li");
document.write("リストの項目の数: " + listItems.length + "<br>");

listItems.forEach((item, index) => {
    document.write("項目 " + (index + 1) + ": " + item.innerHTML + "<br>");
});
</script>

ブラウザ表示

このコードでは、querySelectorAllを使ってすべてのリスト項目を取得し、それぞれの内容を順番に表示しています。

3. 実際のHTMLを使った動作例

次の例では、実際のHTML構造に対してDOM操作を行い、リストの内容を取得して表示します。


<ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>バナナ</li>
</ul>

<script>
let fruits = document.querySelectorAll("ul li");
document.write("<h3>取得したリストの内容</h3>");
fruits.forEach(fruit => {
    document.write(fruit.innerHTML + "<br>");
});
</script>

ブラウザ表示

このプログラムでは、リスト内のすべての項目を取得し、その内容を順番に表示しています。

4. DOM操作の応用例

DOMの基本を理解すると、ボタンを押したときに表示される内容を変更したり、特定の要素にスタイルを動的に適用するなど、さまざまな応用が可能になります。

たとえば、次のようにボタンを押したときにテキストを変更する例があります：


<button onclick="changeText()">クリックして変更</button>
<p id="text">ここを変更します</p>

<script>
function changeText() {
    let paragraph = document.querySelector("#text");
    paragraph.innerHTML = "テキストが変更されました！";
}
</script>

ブラウザ表示

この例では、ボタンにonclick属性を指定し、ボタンをクリックするとchangeText関数が呼び出され、指定したパラグラフのテキストが動的に変更されます。