JavaScriptでよく聞くDOMって何？

この記事は、以下の方を対象に書いています。

よく聞くけどDOMって何？
DOMについて、もう一度基礎を学びたい

そもそもDOMとは？
DOMツリー
HTML要素の特定
1. 代表的なメソッド一覧
DOM操作
1. 実践的サンプルコード
まとめ

そもそもDOMとは？

DOMとは、「Document Object Model」の略です。

JavaScriptからHTMLへ対して入出力行うためのAPIになります。

かなり簡単に言うと、HTMLに動き（ボタンクリックすると色が変化等）を与えるためのツールです。

DOMは、「DOMインターフェース」や「DOM API」と呼ばれたりもします。

また、DOMインターフェースを持つオブジェクトを「DOMオブジェクト」と呼びます。

JavaScriptのコードで下記のようなものがありますが、

これはDOMオブジェクトのプロパティの値を変更しています。

const element = document.getElementById('id-name')
element.innerHTML = '<div>test</div>'

DOMツリー

DOMツリーとは、Webページの構造や要素を表す階層的なオブジェクトツリーのことです。

オブジェクトは、HTML要素であるテキストや画像、リンクなどを指します。

JavaScriptでは、このオブジェクトにアクセスし、要素を変更したりすることができます。

このオブジェクトの変更は、「DOM操作」と呼ばれます。

DOM操作を行うことで動的なWebページを実現することが可能です。

HTML要素の特定

DOM操作をするためには、HTML要素の特定をしなければなりません。

そのために、JavaScriptでは、HTML要素を特定するためのメソッドが用意されています。

特定するためにはdocumentオブジェクトを用います。

例えば、下記のHTMLがあるとします。

divタグのidに「my-id」を設定しています。（13行目）

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
　<script src="../js/index.js" defer></script>
</head>

<body>
  <div id="my-id">AAA</div>
</body>

</html>

次にJavaScript側でdivタグを特定し、コンソール表示してみます。

const element = document.getElementById('my-id')
console.log(element)

// コンソール
// <div id="my-id">AAA</div>

documentオブジェクトのgetElementById()メソッドで要素を特定しました。

上記のメソッド以外にも様々なメソッドが存在しますので、よく使われるものを紹介します。

代表的なメソッド一覧

メソッド名	説明
getElementById()	指定したID属性を持つ単一の要素を取得 const element = document.getElementById(“myElementId”)
getElementsByClassName()	指定したクラス名を持つ要素のコレクションを取得 const elements = document.getElementsByClassName(“myClassName”)
getElementsByTagName()	指定したタグ名を持つ要素のコレクションを取得 const elements = document.getElementsByTagName(“div”)
querySelector()	指定したCSSセレクタに一致する最初の要素を取得 cosnt element = document.querySelector(“#myElementId”)
querySelectorAll()	指定したCSSセレクタに一致するすべての要素のコレクションを取得 const elements = document.querySelectorAll(“.myClassName”)

HTML要素を特定するためのメソッド

上図の青文字のメソッドは、取得される要素が1つしかないものを表しています。

逆に赤文字のメソッドは、複数個のHTML要素を取得できます。

DOM操作

DOM操作は、DOMオブジェクトに対して変更（追加や削除も）をすることです。

今回はulタグの下にliタグを追加してみます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/index.js" defer></script>
</head>

<body>
  <ul id="my-list"></ul>
</body>

</html>

次にJavaScriptでDOM操作をします。

// 要素の特定
const list = document.getElementById('my-list')

// 要素の作成
const listItem = document.createElement('li')
listItem.textContent = 'new Item'

// 要素の追加
list.appendChild(listItem)

これで、リストが1つ追加されたことを確認できます。

このように、DOMオブジェクトに対して、変更を加えることがDOM操作です。

実践的サンプルコード

次は、先ほどのHTMLを使用して複数のリストを作成してみます。

const obj = {
  item1: 'new item1',
  item2: 'new item2',
  item3: 'new item3',
}

// 要素の特定
const list = document.getElementById('my-list')

// objの要素数分ループ
for (let val in obj) {
  
  // 要素の作成
  const listItem = document.createElement('li')
  listItem.textContent = obj[val]

  // 要素の追加
  list.appendChild(listItem)
}

for…in文を使用して、オブジェクトの要素数分ループ処理をしてみました。

ただし、上記のコードにはまだ改善点があります。

for…in文の場合、意図していないプロパティ（値）を

受け取ってしまう場合が想定されます。

その点を考慮して下記に変更してみます。

const obj = {
  item1: 'new item1',
  item2: 'new item2',
  item3: 'new item3',
}

const list = document.getElementById('my-list')

Object.keys(obj).forEach(function(key) {
  const listItem = document.createElement('li')
  listItem.textContent = obj[key]
  list.appendChild(listItem)
});

for…in文については、以下の記事で解説していますので、

ぜひ参考にしてみてください！