【JavaScript入門】JavaScriptでDOMを操作してみよう – DOMとは –

本章では、JavaScriptのDOMの扱いについて解説するよ！

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptのDOMの扱いについて学びます。

DOMとは何か、DOMは何のためにあるのか、JavaScriptでどのようにDOMを扱うのかなどを解説します。

本題に入る前に、DOMを理解するためにこちらを確認しておきましょう。

DOMは、HTML（または、XML）文書を表現、操作するための仕組み(API)
HTMLファイルは、実態はただのテキストファイルで、DOMはその HTMLファイルを表現するための仕組み
DOMは、ウェブページを表示したり、保存したり、操作するためにある
JavaScriptはDOMを通してウェブページに動きをつける

DOMとDOMの操作について一緒に学ぼう！

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

参考サンプルコードJavaScript入門

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「013 DOM」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

DOMってなに

まずは、DOMについて見てみましょう。

DOMは、「Document Object Model」の略で「ドム」と呼びます。

DOMは、HTML（または、XML）文書を表現、操作するための仕組み(API) になります。

HTML文書ってなに

HTML文書とはなんでしょうか。

HTML文書とは、HTMLファイルのことです。

今までサンプルコードなどで見てきた「index.html」のことですね。

<!doctype html>
<html>
  <head>
    <metacharset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <p>こんにちは</p>

    <scriptsrc="index.js"></script>
  </body>
</html>

ウェブブラウザはこのHTMLファイルを読み込んでウェブページを構築します。

HTMLファイルは実態は ただのテキストファイル です。

テキストファイルをただ表示しても、ウェブページのような見た目にはなりません。

そのため、ウェブブラウザはウェブページを構築するためにHTMLファイルをDOMという形式で表現します。

DOMを見てみよう

実際にDOMを見てみましょう。

ウェブブラウザからDOMを見るには、Chromeの「デベロッパーメニュー」を開きます。

右クリックをして、「検証」を押下してください。

押下すると「デベロッパーメニュー」が開きます。

「Elements」タブの赤枠の部分がDOMになります。

「あれ、これはHTMLファイルじゃないの？」と思った方もいると思いますが、

これは、ウェブブラウザが HTMLファイルをDOMとして表現したもの です。

少し紛らわしいですが、この二つは別物です。

HTMLファイルはただのテキストファイルで、DOMはその HTMLファイルを表現するための仕組み だと覚えておいてください。

用語	用途
HTMLファイル	HTMLファイルはテキストファイル、文書
DOM	HTMLファイルを表現、保存、変更するための仕組み

DOMは何のためにあるの？

では、DOMは何のためにあるのでしょうか。

それは、ウェブブラウザがウェブページを 表示したり、保存したり、操作するため にあります。

例えば、ショッピングサイトなどは「商品を選択して、購入ボタンを押して、お会計して」などのアクションをしますね。

そして、そのアクションに応じてウェブページの中身を変えなければなりません。

その中身を変えるために、私たちはDOMを通してウェブページを操作します。

そして、操作した結果によってウェブページの内容を変えることができるのです。

要するに、DOMは ウェブページの中身を変えるための仲介役(API) ということになります。

DOMとJavaScript

以前、JavaScriptは ウェブページに動きをつけるため のプログラミング言語と解説しましたね。

【JavaScript入門】JavaScriptってなに

この動きをつけるために、JavaScriptがDOMにアクセスしてウェブページに操作をしています。

DOMを取得する

では、実際にDOMを取得してみましょう。

サンプルコードのHTMLをもとにやってみましょう。

<!doctype html>
<html>
  <head>
    <metacharset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <p>こんにちは</p>

    <scriptsrc="index.js"></script>
  </body>
</html>

DOMを取得するには、document.querySelector というAPIを使うことができます。

document.querySelector(取得したいタグやクラス名)

document.querySelector は、取得したいHTMLのタグ名やクラス名を記述します。

次の例では、ウェブページにあるpタグの要素を取得しています。

const p = document.querySelector("p")

HTMLファイルを見てみると、pタグは「こんにちは」の部分ですね。

<!doctype html>
<html>
  <head>
    <metacharset="utf-8">
    <title>DOM</title>
  </head>

  <body>
    <!-- ここのpタグを取得している -->
    <p>こんにちは</p>

    <scriptsrc="index.js"></script>
  </body>
</html>

取得したpタグから「こんにちは」を抜き出してみましょう。

タグの中身は、innerText を使うと取り出せます。

const p = document.querySelector("p")
const text = p.innerText

これをコンソールに出すと、「こんにちは」を取得できたのが分かります。

const p = document.querySelector("p")
const text = p.innerText

console.log(text)

実行結果

こんにちは

コンソールで操作してみよう

実は、このような操作はコンソール画面から行うことができます。

コンソール画面では 直接JavaScriptのコードを書いて、実行することができます。

次のように、コンソール画面に上記のコードを直接書いてみましょう。

DOMを書き換えてみよう

では、取得したpタグの中身を書き換えてみましょう。

「こんにちは」から「おはよう」に書き換えましょう。

DOMの中身を書き換えるには、先ほどの innerText に直接値を代入するとできます。

const p = document.querySelector("p")
p.innerText = "おはよう"

ウェブページの文字が「こんにちは」から「おはよう」に変わったのが確認できます。

注意して欲しいのは、これはDOMの要素が変わっただけで HTMLファイル自体が変わったわけではありません。

なので、リロードすると文字はまた戻ります。

なぜなら元になるHTMLファイルは何も変わってないからです。

このように、HTMLファイルとDOMは別々のものということです。

DOMを操作してみよう

実際にDOMを操作してみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「DOMを操作してみよう」と記述がされています。

その真下に、次のように書いてください。

// DOMを操作してみよう
const p = document.querySelector("p")
console.log(p.innerText)

p.innerText = "こんばんわ"
console.log(p.innerText)

const span = document.querySelector("span")
console.log(span.innerText)

span.innerText = "いらっしゃいませ"

Chromeのコンソールで確認すると、次のように出力されているのが分かります。