2023.09.30 2024.01.16

DOMとは？JavaScriptからの活用方法を解説

salmoncode

記事内に商品プロモーション（Amazonアソシエイト含む）を含む場合があります。

この記事の目次

DOM
DOMを扱う
- ページ内のテキストを書き換える
- 同じタグが複数ある場合
DOMの応用
- 特定の要素がクリックされたときに実行する
- クラスを付け替える

DOM

DOMとはDocument Object Modelの略で、「htmlドキュメントをJavaScriptの部品（オブジェクト）のように扱おう」という思想のもとに考案されたAPIです。

これまで document というオブジェクトを扱ってきましたが、これもDOMの一種です。

document のプロパティを辿ったり関数を呼び出すことで、html内部のコンテンツにアクセスすることができます。

DOMを扱う

ページ内のテキストを書き換える

ではさっそく、DOMを利用してページ内部のテキストを書き換えて見ましょう。

1window.onload = () => {
2  document.body.innerHTML = "トップページ"
3}

こちらのプログラムを実行すると、ページの読み込み直後に「トップページ」と表示されます。

検証するとわかると思いますが、 <body> の中身が書き換えられているのです。

コードについて詳しく見てみましょう。

document の body プロパティ(<body> のこと)にアクセスし、さらにその innerHTML プロパティにテキストを代入しています。

このように、body要素はプロパティを辿っていくことによってアクセスすることが可能です。

では、さらにbodyの中の要素にアクセスするにはどうすればいいでしょうか？

この場合は、cssのセレクタという考え方が役に立ちます。

例えば、以下のようなhtmlがあったとします。

1<html>
2<head>
3	省略
4</head>
5<body>
6	<section>
7		<h1 id="title" class="title"></h1>
8	</section>
9</body>
10</html>

この中の h1 を書き換えるプログラムは以下のようになります。

1window.onload = () => {
2  document.querySelector("h1").innerHTML = "トップページ"
3}

document の querySelector という関数を呼び出しています。querySelector の引数にはセレクタを文字列で入力することができ、今回はタグとして h1 を指定しました。

つまり、idで指定する場合は #title を、クラスで指定する場合は .title を入力することで同様にhtml要素にアクセスすることができます。

なお、変数を使って処理を分けると以下のようになります。

1window.onload = () => {
2  const tag = document.querySelector("h1")
3	tag.innerHTML = "トップページ"
4}

同じタグが複数ある場合

では、同じタグ（またはclass）が複数ある場合はどうなるのでしょうか？

試しに、htmlの方を書き換えて h1 を増やしてみましょう。

1<html>
2<head>
3	省略
4</head>
5<body>
6	<section>
7		<h1 id="title" class="title"></h1>
8		<h1 id="title2" class="title"></h1>
9	</section>
10</body>
11</html>

この状態で先ほどのプログラムを実行してみると、上の h1 要素が変更されます。

そう、querySelector はセレクタでヒットした最初の要素にアクセスするのです。

DOMの応用

特定の要素がクリックされたときに実行する

前の章（イベント）では、ページ全体のどこかがクリックされたときに関数を実行するプログラムを記述しました。

今回は、前の節で学んだquerySelectorを用いることで、特定の要素がクリックされた場合に関数を実行するプログラムを記述します。

まず、クリックする対象を表示するために、HTMLを以下のように変更します。

1<body>
2  <section>
3    <div>
4      <h1>最初のテキスト</h1>
5    </div>
6  </section>
7</body>

JavaScript側は以下のようなプログラムになります。

1window.onload = () => {
2  const tag = document.querySelector("h1")
3	tag.onclick = () => {
4			tag.innerHTML = "トップページ"
5	}
6}

ちょっと複雑になってきましたね。こちらを実行すると、初めは「最初のテキスト」という文章が表示され、それをクリックすることで「トップページ」という文章に変化します。

プログラムを読みやすくするために、変数を使ってみましょう。

以下のようになります。

1const changeTitle = () => {
2  const tag = document.querySelector("h1")
3	tag.innerHTML = "トップページ"
4}
5
6window.onload = () => {
7  const tag = document.querySelector("h1")
8	tag.onclick = changeTitle
9}

DOMによって取得してきたHTML要素のonclick というプロパティに、 changeTitle 関数を代入しています（注：このとき、即座に実行したいわけではないので changTitle の末尾に ()はつけないでください）。

クラスを付け替える

これまで比較的行数の少ないプログラムで、Webページの小さな、しかし確かな変化を実現してきました。

しかし、Webデザイナーとしては肝心のデザインを変更する方法が知りたいことと思います。

そこで、HTML要素のクラスをつけたり外したりすることで、CSSの適応を変化させてみます。

これにより、JavaScriptによってWebページのデザインを変更することができます。

それではまず、cssを準備しましょう。

cssファイルには、以下のように記述します。htmlファイルから読み込むのを忘れずに！

1.red {
2	color: red;
3}

そして、プログラムを以下のように記述します。

1const addClass = () => {
2  const tag = document.querySelector("h1")
3	tag.classList.add("red")
4}
5
6window.onload = () => {
7  const tag = document.querySelector("h1")
8	tag.onclick = addClass
9}

実行してみると、「最初のテキスト」をクリックした際に文字が赤くなるようになります。

これで、デザインを変更するための基本的なテクニックを会得することができました。

プログラムの詳細については、そろそろある程度予想できるようになってきたのではないかと思います。

tagの classList というプロパティの add という関数を実行しています。

この関数は引数として文字列を入力すると、それをclassとして追加するようにhtmlを書き換えてくれるのです。

逆にclassを削除したい場合は、 remove を呼び出します。

1const removeClass = () => {
2  const tag = document.querySelector("h1")
3	tag.classList.remove("red")
4}
5
6window.onload = () => {
7  const tag = document.querySelector("h1")
8	tag.onclick = removeClass
9}

では、クリックするたびにclassを付けたり外したりする場合はどうすればよいでしょうか？

JavaScriptでclassが付いているかを確認する方法もありますが、それよりも簡単な toggle という関数が用意されています。

1const toggleClass = () => {
2  const tag = document.querySelector("h1")
3	tag.classList.toggle("red")
4}
5
6window.onload = () => {
7  const tag = document.querySelector("h1")
8	tag.onclick = toggleClass
9}