はじめに

最近JavaScriptの学習を始めて、基本的な文法などはスラスラ学習できていたのですが、DOMについての学習フェーズに入った際に苦戦したので、記事に起こして自分の考えをまとめていこうと思います。

DOMについて

それではDOMについて解説していこうと思います。
DOMと聞いて最初に思いついたのは...

これですね。ジ○ン軍のモビル○ーツかな・・・？みたいな。
でも実際にはDOM(Document Object Model)の略で、Webアプリケーションを作るのにHTMLを操作するものみたいです。
もっと端的にいうと、JSからHTMLの要素にアクセスするための仕組みです。
DOMは下の画像のようなツリー構造になってます。

画像からわかるようにDOMは「ドキュメントオブジェクト」とも呼びます。

DOMの役割

それでは次にDOMの役割について解説していきます。
突然ですが、普段Webサイトを閲覧している際に、以下のような体験をしたことはないでしょうか？

ボタンを押したらボタンそのもののデザインが変わった。
ページをスクロールすると広告のバナーが途中で表示された。
入力フォームで入力内容を間違えると「正しく入力してください」というようなエラーが表示された。

これらは全てDOMを使って実現されています。
DOMを使うことで上記のような動的な表現力を手に入れることができます。
それでは具体的にどんなことができるのかを簡単なコードを例としてみていきましょう。
今回はこちらのページを利用して学習を進めていきます。
以下の内容でHTMLファイルを保存します。

DOM動作確認用のWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="sample">オリジナルのテキストです</div>
  </body>
</html>

次に以下の内容でJavaScriptファイルに保存します。

DOMを利用したテキストの書き換え

const tag = window.document.querySelector('#sample');
tag.textContent = 'テキストを書き換えます'

このコードを実行すると「オリジナルのテキストです」と表示されていたものが、「テキストを書き換えます」という表示に変化するはずです。

このようにHTML要素をJavaScriptから操作する機能を提供するのがDOMです。
ちなみにコードを書く際にはWindowを省略してdocumentから書くことが多いです。
以下のコードはどちらも同じ挙動になります。

window.document.querySelect('#foo');
document.querySelect('#foo');

要素の検索

HTMLの要素を操作するには、まず操作対象となる要素を探す必要があり、その際に使用するのがquerySelector()メソッドです。

特定の要素を検索

document.querySelector(CSSセレクタ);

querySelector()は引数にCSSセレクタを渡すと、それと一致した最初の要素を返します。また、複数の要素と一致した場合は最初に一致した値を返します。
文章だと伝わりづらいかとも思うので実際に使ってみます。

class属性の要素を持つWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="sample">class 属性が sample 1個目</div>
    <div class="sample">class 属性が sample 2個目</div>
    <div class="sample">class 属性が sample 3個目</div>
  </body>
</html>

class属性sampleの要素を検索

const element = document.querySelecor('.sample);
console.log(element);

それでは、実行結果を見てみましょう。

上記のようにHTML要素を取得することができたはずです。
このようにquerySelector()を使うことで任意のHTML要素を取得することができます。
余談ですが、1つの要素だけではなく、すべての要素を取得したい場面もあると思います、そのような時にはquerySelectorALL()メソッドを使用します。
使い方は基本的に同じで、引数にCSSセレクタを渡します。

要素の変更

要素の変更をする方法を学ぶと、先ほど紹介したようなボタンの色が変わったり、スクロール中に広告を表示したりなど、操作に応じた見た目の変化を実装することができます。
それではまず指定した要素のテキストを変更してみます。テキストを変更する際はtextContentプロパティを使用します。

テキストの変更

要素.textContent = '変更したいテキスト'

テキスト要素を持つWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>テキスト</p>
  </body>
</html>

テキストの書き換え

const p = document.querySelector('p');
p.textContent

それでは実行してみます。

上記のようにブラウザ上のテキストが変更されたかと思います。
HTML自身はさまざまな属性を持っていますが、その中でも頻繁に使用する要素といえばimg要素があると思います。
img要素では幅(width)や高さ(height)、ファイルの場所を指定(src属性)したりとさまざまな属性が絡み合って画像を表示しています。
こちらもDOMを使用して変更できます。

属性の参照と変更

// 指定した属性の値を参照
要素.属性名

// 指定した属性の値を変更
要素.属性名 = '変更したい値';

それでは実際に使っていきます。

画像要素を持つWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <img src="(フリー素材のURLを使用)" width="200" height="200">
  </body>
</html>

画像要素のwidth属性を変更

const img = document.querySelector('img');
img.width = 200;

それでは実行してみます。

画像の幅が変更されていれば成功です。

要素の作成

DOMではHTML内に書かれていない要素を追加することができます。
それがcreateElement()メソッドです。このメソッドに引数としてタグ名を渡すことで要素オブジェクトが作成されます。

要素の作成

document.createElement('タグ名');

それではp要素のオブジェクトを作成してみましょう。

要素を作成する

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

実行してみます。

きちんとp要素が作成されました。
しかし、作成されただけではブラウザに表示されません。
実際に表示させるにはさまざまなメソッドを使用する必要があります。

createElementで作った要素オブジェクトを実際にブラウザで表示するにはappend()というメソッドを使用します。append()は指定した要素を子要素として末尾に追加することができるメソッドです。

要素を追加

親要素.append('追加要素');

それでは使ってみましょう。

要素を追加するWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="content">
      <p>最初の要素</p>
    </div>
  </body>
</html>

子要素の末尾に要素を追加

const newElement = document.createElement('p');
newElement.textContent = '新規に追加';

const content = document.querySelector('.content');
content.append(newElement);

実行してみます。

無事に要素が追加されました。
逆に子要素の先頭に追加するときはprepend()メソッド、

構文

親要素.prepend(追加要素);

指定した要素の前後に追加する時はbefore()メソッド・after()メソッド

構文

指定要素.before(追加要素);
指定要素.after(追加要素)

をそれぞれ使用していきます。

要素の削除

要素を削除する際はremove()メソッドを使用します。

要素の削除

削除したい要素.remove();

要素を削除するWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="content">
      <!-- 下記の要素を削除したい -->
      <p class="first">最初の要素</p>
    </div>
  </body>
</html>

要素を削除する

const firstElement = document.querySelector('.first');
firstElement.remove();

それでは実行してみます。

表記がなくなっていれば成功です。

要素の置換

最後に要素を置き換える際に使用するreplaceWith()メソッドについて説明していきます。

要素の置換

置き換えたい要素.replaceWith(置き換える要素);

先ほど使用したHTMLのp要素を置換します。

要素の置換をするWebページ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="content">
      <!-- 下記の要素を別の要素に置換したい -->
      <p class="first">最初の要素</p>
    </div>
  </body>
</html>

要素を置換する

const newElement = document.createElement('p');
newElement.textContent = '置き換える要素';

const firstElement = document.querySelector('.first');
firstElement.replaceWith(newElement);

実行してみます。

要素が置き換わりました。

まとめ

以上のメソッドおよびプロパティをまとめると以下のようになります。

要素の探索 => querySlector()メソッド
要素の変更 => textContentプロパティ
要素の作成 => createElement()メソッド
要素の削除 => remove()メソッド
要素の置換 => replaceWith()メソッド

最後に

今回はJavaScriptのDOMについてまとめていきました。
Rubyを事前に勉強していたので、それぞれの文法などの学習にはそんなに時間がかからなかったもののDOMはちょっと特殊な感じがしたので、まあいい勉強になりました笑
イベントについても理解が不十分後頃があるので、後日まとめられたらいいなと思います。
余談ですが、もう少ししたら本格的にアプリ制作に取り組んでいく予定です。
自分の技術力がどれくらいあるか試せる場でもあるので楽しみです。

参考文献