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関数が呼び出され、指定したパラグラフのテキストが動的に変更されます。

5. getElementByIdやgetElementsByClassNameの使い方

DOMでは、querySelector以外にも要素を取得する方法があります。代表的なものとして、getElementByIdやgetElementsByClassNameがあります。

getElementById：指定したidの要素を1つ取得
getElementsByClassName：指定したクラス名の要素を複数取得


<script>
let element = document.getElementById("title");
let items = document.getElementsByClassName("item");

document.write("IDの内容: " + element.innerHTML + "<br>");
document.write("クラスの数: " + items.length);
</script>

用途に応じて取得方法を使い分けることで、効率よくDOM操作を行うことができます。

6. 取得した要素の内容を変更する方法

DOMで取得した要素は、その内容やスタイルを自由に変更することができます。特によく使われるのがinnerHTMLやtextContentです。


<script>
let heading = document.querySelector("h1");

heading.innerHTML = "新しいタイトルに変更";
</script>

このように、取得した要素に対して新しい値を代入することで、画面に表示される内容を動的に変更できます。

7. DOM操作時の注意点とよくあるミス

DOM操作を行う際には、いくつか注意すべきポイントがあります。これらを理解しておくことで、エラーを防ぐことができます。

要素が存在しない場合：nullが返されるため、操作するとエラーになる
スクリプトの実行タイミング：HTML読み込み前に実行すると取得できない
セレクタの書き間違い：正しいCSSセレクタを指定する必要がある


<script>
let element = document.querySelector("#sample");

if (element) {
    document.write(element.innerHTML);
} else {
    document.write("要素が見つかりません");
}
</script>

このように、取得結果を確認しながら安全にコードを書くことが重要です。