DOMの読み込みと書き込み

DOM（Document Object Model）操作は、読み込みと書き込みに集約されます。
双方とも、あるひとつのメソッドを使うことで実現できます。

それは、querySelectorです。

「DOMとは」、「DOM操作とは」といった基礎知識については、直前の記事「DOM操作の事前知識」をご確認ください。

複数要素の読み込みと書き込みについては、次の記事『複数要素のDOM操作（読み込みと書き込み）』をご確認ください。

1 DOMの読み書きはquerySelectorにお任せ
- 1.1 DOMへの書き込み
- 1.2 DOMの読み込み
2 操作対象の要素をピンポイントで指定する
- 2.1 classセレクタのサンプルプログラム
- 2.2 idセレクタのサンプルプログラム
3 まとめ

DOMの読み書きはquerySelectorにお任せ

前述の通り、querySelectorというメソッドがひとつあれば、DOMを自在に読み書きできます。

DOMへの書き込み

まずは特定のDOM要素に、JavaScriptによって文字列を書き込むサンプルからいきましょう。

例として p タグの要素に文字列「Hello」表示するプログラムを作成しています。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM操作</title>
</head>
<body>
  <!-- pタグの内容は空 -->
  <p></p>

  <script>
  document.querySelector("p").textContent = "Hello";
  </script>
</body>

ブラウザおよびデベロッパーツールを開き、結果を確認してみてください。
※ デベロッパーツールの開き方はこちらの記事をご確認ください。

ブラウザ

Hello
　

【要素】デベロッパーツール

▼ <body>
    <p>Hello</p>

ブラウザの本体に文字列「Hello」が表示されており、デベロッパーツールの「要素」タブを確認すると、間違いなく「pタグの内容」として書き込みできていることが分かります。

要素の内容を書き込む際、今回は「textContent」というプロパティを使っています。
一点、注意が必要なのは、操作する対象がHTMLのフォーム部品の場合「textContent」ではなく「value」プロパティを使う必要があることです。

pタグをinputタグに書き換えてみましょう。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM操作</title>
</head>
<body>
  <!-- inputタグの値（value）は空 -->
  <input type="text">

  <script>
  document.querySelector("input").value= "Hello";
  </script>
</body>

ブラウザ

DOMの読み込み

pタグの内容を読み込み、inputの値を書き込むサンプルプログラムを作成してみます。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM操作</title>
</head>
<body>
  <p>Hello</p>
  <input type="text">

  <script>
  let message = document.querySelector("p").textContent;

  document.querySelector("input").value = `${message} Yoda!`;
  </script>
</body>

ブラウザ

「`${message} Yoda!`」の部分は、テンプレートリテラルと呼ばれ、バッククォーテーションで囲むことにより、文字列の中に変数を含めることができます。

テンプレートリテラル内の変数は、${変数}の書式で記述します。

さらに詳しい説明は、記事『JavaScriptのデータ型「文字列」』の「バッククォーテーションについて」の項をご確認ください。

操作対象の要素をピンポイントで指定する

👆の例で使用したpタグやinputタグなどは通常、ページ内に複数使用されるでしょう。
そんな時、タグ名での指定では一番最初に記述されたタグしか取得できません。

操作したい対象の要素をピンポイントで指定するための仕組みを「セレクタ」と呼びます。
CSSをある程度学習された方は、聞いたことがありますよね。

なんと、querySelectorのセレクタは、CSSのセレクタとまったく同じルールが適用されるのです。
よって、CSSのセレクタをしっかり覚えている方は、その知識が役立ちます。
そうでない方は、セレクタの種類は非常に多いので、まずは3種類だけ確実に覚えてしまいましょう。

今回紹介する3種類以外のセレクタについては、実践編の記事で出てくる都度、説明を入れていく予定です。

要素セレクタ
- タグ名をそのまま指定する方法
- 使用例：document.querySelector(“p”)
classセレクタ
- class名によって指定する方法
- 使用例：document.querySelector(“.test-class”)
IDセレクタ
- idによって指定する方法
- 使用例：document.querySelector(“#test-id”)

サンプルプログラムを掲載しておきます。

classセレクタのサンプルプログラム

classセレクタの例

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM操作</title>
</head>
<body>
  <p>Test</p>
  <p class="target">Test</p>

  <script>
  document.querySelector(".target").textContent = "Hello";
  </script>
</body>

ブラウザ

Test
Hello

👆pタグの内容は2つとも「Test」でしたが、class属性に「target」が付与されている方のpのみ「Hello」に書き換えられたことが分かります。

idセレクタのサンプルプログラム

idセレクタの例

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM操作</title>
</head>
<body>
  <p>Test</p>
  <p id="target">Test</p>

  <script>
  document.querySelector("#target").textContent = "Hello";
  </script>
</body>

ブラウザ

Test
Hello

👆pタグの内容は2つとも「Test」でしたが、id属性に「target」が付与されている方のpのみ「Hello」に書き換えられたことが分かります。

上記以外によく使用される主要セレクタは、『DOM操作に使用するCSS主要セレクタ一覧』にまとめています。

まとめ

DOM操作の読み書きはquerySelectorメソッドひとつで解決できる
フォーム部品（inputなど）はvalue、それ以外はtextContentプロパティを使って読み書きする
querySelectorは引数のセレクタにより特定の要素を指定できる
- 要素セレクタはタグ名をそのまま指定
- classセレクタはドット「.」を使用してclass名を指定
- idセレクタはシャープ「#」を使用してidを指定

今回の内容は、JavaScriptでのフロントエンド開発に不可欠な基礎知識です。

しっかりと復習頂き、コードを書いて実行を実行のサイクルを繰り返して、理解を深めて頂ければと思います。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは、最後までお読みいただきありがとうございます。

『詳説 JavaScript』メニューに戻る