JavaScript入門 #14 - DOM要素の取得

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScriptDOM

このシリーズについて

「JavaScript入門」第14回です。ここからはブラウザ上のHTMLをJavaScriptで操作します。

DOMとは

DOMは、HTMLをJavaScriptから扱えるようにしたオブジェクト構造です。

ブラウザで画面を操作するJavaScriptでは、まずHTML要素を取得することから始まります。

今回作るもの

ボタンはまだ使わず、JavaScriptから見出しテキストを書き換える最小例を作ります。

Step 1: HTMLファイルを作る

dom-selectors.html を作ります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>DOMの基本</title>
  </head>
  <body>
    <h1 id="title">変更前のタイトル</h1>
    <p class="message">メッセージです</p>

    <script src="dom-selectors.js"></script>
  </body>
</html>

同じフォルダに dom-selectors.js を作ります。

Step 2: querySelectorで要素を取得する

CSSセレクタと同じ考え方で要素を取得できます。

const title = document.querySelector("#title");
const message = document.querySelector(".message");

console.log(title);
console.log(message);

HTMLファイルをブラウザで開き、Consoleに要素が表示されれば成功です。

Step 3: textContentを書き換える

取得した要素のテキストを変更します。

const title = document.querySelector("#title");

title.textContent = "JavaScriptで変更しました";

ブラウザを再読み込みすると、見出しが変わります。

Step 4: 要素がない場合を確認する

存在しないセレクタを指定すると null になります。

const notFound = document.querySelector(".not-found");

console.log(notFound);

null のまま textContent を触るとエラーになります。

const notFound = document.querySelector(".not-found");

if (notFound !== null) {
  notFound.textContent = "見つかりました";
}

注意: DOM要素を取得したら、存在しない可能性を考えます。特に後からHTMLを変更する時に重要です。

Step 5: 複数要素を取得する

複数の要素を取る時は querySelectorAll を使います。

<ul>
  <li class="item">HTML</li>
  <li class="item">CSS</li>
  <li class="item">JavaScript</li>
</ul>

const items = document.querySelectorAll(".item");

items.forEach((item) => {
  console.log(item.textContent);
});

よくあるエラー

エラーよくある原因確認する場所
document is not definedNode.jsで実行しているブラウザでHTMLを開く
Cannot set properties of nullセレクタが間違っているid/class名
変更されないJSファイルが読み込まれていないscript src

次のステップ

JavaScript入門 #15 - イベント処理 で、クリックや入力に反応する処理を書きます。

まとめ

DOM操作では、まず document.querySelector でHTML要素を取得します。取得できた要素に対して textContent などを書き換えることで、画面表示をJavaScriptから変更できます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR