【JavaScript入門】JavaScriptでDOMを操作してみよう – DOMの構造 –

本章では、JavaScriptのDOMの構造とDOMの操作について解説するよ！

はじめに

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

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

【JavaScript入門】はじめに

本章では、DOMの構造とDOMの操作について学びます。

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

DOMは、DOMツリーという階層構造の集合を作る
DOMツリーとは、HTMLを木構造で表現したもの
DOMツリーの一つ一つのオブジェクトは、ノードと呼ばれる
ノードを操作してウェブページの中身を追加、変更、削除する

では、DOMの構造とDOMの操作について一緒に学びましょう。

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

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

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

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

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

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

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

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

DOMの構造

前章では、DOMとは何かについて学びました。

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

本章では、DOMの構造とDOMの操作について解説します。

DOMツリー

DOMとは、HTML文書を表現、操作するための仕組みです。

ウェブページを構築するために、DOMは DOMツリー という階層構造の集合を作ります。

DOMツリーとは、HTMLを木構造で表現したものです。

例えば、次のようなHTMLがあるとします。

<!doctype html>
<html>
  <head>
    <metacharset="utf-8">
    <title>DOMの構造</title>
  </head>
  <body>
    <h1>DOMの構造</h1>
    <p>こんにちは</p>
    <scriptsrc="index.js"></script>
  </body>
</html>

これをDOMツリーで表現すると次のようになります。

「Document」がルートになり、その下にHTMLが階層構造で作られています。

一つ一つのオブジェクトは、ノード と呼ばれます。

ウェブページをの中身を変更するには、このノードを操作して行います。

メモ

DOMツリーの全てのオブジェクトはノードになります。ノードは、appendChild、removeChildなどの機能を提供しており、これらの機能を全ての要素が使えます。

ノードにはいくつか種類があります。

Element
Attr
CharacterData

ElementはNodeから派生した型で、全てのHTMLの要素はElementを継承しています。

本章では簡略して説明するために一括してノードと表現します。

デベロッパーメニューで見てみよう

Chromeのデベロッパーメニューで階層構造になっているDOMを見ることができます。

Chromeの画面で右クリックをして、「検証」を押下してください。

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

「Elements」タブを見てみましょう。

HTML要素が階層化しているのが分かります。

DOMの操作

次に、ノードの取得、作成、変更、削除の方法を見てみましょう。

ノードの取得

ノードの取得方法には次のようなものがあります。

getElementById
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll

getElementById

getElementById は、idによる検索ができます。

idとは、HTMLタグに設定できるid属性のことです。

次のように、HTMLタグに一意のIDを設定できます。

<p id="hello">こんにちは</p>

このidを使って次のようにノードを検索します。

const p = document.getElementById("hello")

コンソールで上記のコードを実行すると次のように取得できます。

getElementsByClassName

getElementsByClassName は、classによる検索ができます。

classとは、HTMLタグに設定できるclass属性のことです。

次のように、HTMLタグにクラス名を設定できます。

<p class="helloClass">こんにちは</p>

クラス名は複数の要素に設定することができます。

<p class="helloClass">こんにちは2</p>
<p class="helloClass">こんにちは3</p>

このclassを使って次のようにノードを検索します。

const nodes = document.getElementsByClassName("helloClass")

コンソールで上記のコードを実行すると次のように取得できます。

クラスは複数取得できるので、2つの要素が取得できました。

getElementsByTagName

getElementsByTagName は、タグ名による検索ができます。

次のようにタグ名を指定してノードを検索します。

const nodes = document.getElementsByTagName("p")

pタグが3つあったときは次のように取得することができます。

<p id="hello">こんにちは</p>
<p class="helloClass">こんにちは2</p>
<p class="helloClass">こんにちは3</p>

querySelector

querySelector は、CSSで要素を指定する時と同じような指定方法でノードを取得できます。

const p = document.querySelector("p")

querySelector は、複数の要素があったとしても該当する最初のノードを取得します。

pタグが3つあったときは一つ目を取得します。

<p id="hello">こんにちは</p>
<p class="helloClass">こんにちは2</p>
<p class="helloClass">こんにちは3</p>

querySelectorAll

querySelectorAll は、querySelectorと同じような指定方法で該当する全てのノードを取得します。

const nodes = document.querySelectorAll("p")

pタグが3つあったときは3つ全てを取得します。

<p id="hello">こんにちは</p>
<p class="helloClass">こんにちは2</p>
<p class="helloClass">こんにちは3</p>

ノードの作成

次は、ノードを作成してみましょう。

document.createElement

ノードを作成するには document.createElement を使います。

次の例では、新しいpタグのHTML要素を作成しています。

const element = document.createElement('p');

新しく作ったpタグに対して、中身の文字を入れましょう。

const element = document.createElement('p');
element.innerText = "おはよう"

この「element」変数には新しく作ったpタグ(ノード)の情報が入っています。

ウェブページにこの新しいpタグを出すには、DOMツリーに追加する必要があります。

DOMツリーに追加する

新しく作ったノードをDOMツリーに追加しましょう。

DOMツリーに追加するには、appendChild で追加することができます。

次の例では、body要素に新しい要素を追加しています。

document.body.appendChild(element)

Chromeのコンソールで上記のコードを実行してみましょう。

「おはよう」が追加されたのが確認できましたね。

ノードの削除

ノードの削除には、removeChild を使うことができます。

次のように、削除したいノード指定します。

const p = document.querySelector("p")
document.body.removeChild(p)

Chromeのコンソールで上記のコードを実行してみましょう。

DOM操作をしてみよう

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

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

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

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

// ノードの取得
const p1 = document.getElementById("hello")
console.log(p1)
const nodes1 = document.getElementsByClassName("helloClass")
console.log(nodes1)
const nodes2 = document.getElementsByTagName("p")
console.log(nodes2)
const p2 = document.querySelector("p")
console.log(p2)
const nodes3 = document.querySelectorAll("p")
console.log(nodes3)

// ノードの作成
const element = document.createElement('p');
element.innerText = "おはようございます！"
document.body.appendChild(element)

// ノードの削除
const p3 = document.querySelector("p")
document.body.removeChild(p3)

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