DOMとは
Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。
（DOM | MDNより）
つまりDOM APIを使うことでドキュメントを制御できます。JavaScriptを使えばDOM APIにつなぐことができます。
このことから、JavaScriptとDOMは分かれて扱われています。
DOMツリー
WebページはDocumentオブジェクトによって表されていて、ブラウザがwebページにアクセスしHTMLを解析すると、文書の内容を表すオブジェクトのツリー構造が構築されます。
この構造のことをDOMツリー（またはドキュメントツリー）といいます。
ノード
DOMツリーを形成する一つ一つのオブジェクトをノード（Node）といいます。
ノードの種類
例として下記のようなhtmlがあったとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta chareset="utf-8">
</head>
<body>
<h1>大見出し</h1>
<!-- 本文が入る -->
<p id="text">テキストテキストテキスト</p>
</body>
</html>
おもなノードには下記があります。
| ノードの種類 | 概要 |
|---|---|
| ドキュメントノード | ドキュメント全体を表すDocumentオブジェクト |
| 要素ノード | 要素を表すオブジェクト |
| テキストノード | テキストを表すオブジェクト |
| コメントノード | コメントを表すオブジェクト |
| 属性ノード | 属性を表すオブジェクト |
上記のdom-tree.htmlをDOMツリーで表すと下記のようになります。
document *1
└ html *2
├ head *2
│ ├ 空白 *3
│ ├ title *2
│ ├ 空白 *3
│ ├ meta *2
│ └ 空白 *3
├ 空白 *3
└ body *2
├ 空白 *3
├ h1 *2
│ └ タイトル *3
├ 空白 *3
├ コメント *4
├ 空白 *3
├ p *2
│ └ テキストテキストテキスト *3
└ 空白 *3
*1: ドキュメントノード
*2: 要素ノード
*3: テキストノード
*4: コメントノード
-
通常HTMLでは要素の前後に空白があっても無視されますが、DOMツリーでは空白はテキストと扱われます。 (インラインボックスの要素の場合、前後に空白がある場合、1つの半角スペースがあるかのように振舞います1) - 空白は空白ノードというテキストノードの一種です。
- html要素の先頭と末尾には空白ノードは入りません。
- DOMツリーのルートはdocumentオブジェクトです。
ノードの親子関係
例として、上記のDOMツリーにおけるbodyを基準に考えてみます。
bodyは「h1」の親ノード、「html」の子ノード、「head」の兄弟ノード、「document」の子孫ノード、「タイトル」の祖先ノードと呼びます。
HTML上での呼び方と似たような感じです。
ノードのプロパティ
| プロパティ名 | 概要 |
|---|---|
| parentNode | 親ノードへの参照。（Documentオブジェクトを指定した場合はnull） |
| childNodes | 子ノードへの参照を格納するNodeList |
| firstChild | 最初の子ノード。（子ノードをもたない場合はnull） |
| lastChild | 最後の子ノード。（子ノードをもたない場合はnull） |
| nextSibling | 兄弟ノードの中で次のノード。（次の兄弟ノードをもたない場合はnull） |
| previousSibling | 兄弟ノードの中で1つ前のノード。（前の兄弟ノードをもたない場合はnull） |
| nodeType | ノードの種類を表す数値。詳細はこちら |
| nodeValue | テキストノードのテキストコンテンツ。（要素ノードやドキュメントノードの場合はnull） |
| nodeName | 要素ノードの場合は |
dom-tree.htmlを例にして、pタグを参照したい場合は下記のコードで参照できます。
console.log(document.firstChild.lastChild.childNodes[5]);
ただこの参照では空白ノード（テキストノード）のことを考える必要があり非常に非効率です。
そこでテキストノードを無視して要素ノードを取り出すためのプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| parentElement | 親要素ノードへの参照。（親要素ノードがない場合はnull） |
| children | 子要素ノードへの参照を格納するHTMLCollection |
| firstElementChild | 最初の子要素ノード。（子要素ノードがない場合はnull） |
| lastElementChild | 最後の子要素ノード。（子要素ノードがない場合はnull） |
| nextElementSibling | 兄弟要素ノードの中で次の要素ノード。（次の兄弟要素ノードをもたない場合はnull） |
| previousElementSibling | 兄弟要素ノードの中で1つ前の要素ノード。（前の兄弟要素ノードをもたない場合はnull） |
| childElementCount | 子要素ノードの数。（= children.length） |
先ほどのpタグを参照する場合は下記のようになります。
console.log(document.firstElementChild.lastElementChild.children[1]);
ノードオブジェクトの取得
上記のようにdocumentから要素ノードを取得することは不便です。
DOM APIには任意の要素ノードを取得するメソッドがあります。
IDから取得
document.getElementById('id名');
- 該当するidがない場合はnullが返ります。
クラス名から取得
document.getElementsByClassName('クラス名');
- 指定したクラスを持つ要素ノードへの参照を格納したHTMLCollectionを返します。
- 複数指定した場合はその複数のクラスを持つ要素ノードのHTMLCollectionを返します。
<ul>
<li class="color orange">オレンジ</li>
<li class="color blue">ブルー</li>
<li class="color green">グリーン</li>
</ul>
document.getElementsByClassName('color orange'); // -> [li.color.orange]
- 要素ノードから本メソッドの実行が可能です。
document.getElementById('container').getElementsByClassName('クラス名');
要素名から取得
document.getElementsByTagName('要素名');
- 指定した要素ノードへの参照を格納したHTMLCollectionを返します。
- ワイルドカード(
*)の使用が可能です。 - 要素ノードから本メソッドの実行が可能です。
name属性から取得
document.getElementsByName('名前');
- 指定した要素ノードへの参照を格納したNodeListを返します。
selectors APIから取得
jQueryライクにCSSセレクタを指定して要素を取得できます。
document.querySelector('セレクタ');
document.querySelectorAll('セレクタ');
- querySelector()は指定したセレクタにマッチする要素ノードのうち、最初の要素ノードを返します。
- querySelectorAll()は指定したセレクタにマッチする要素ノードへの参照を格納したNodeListを返します。
- ここでのNodeListはこれまでのメソッドで取得してきたHTMLCollection/NodeListとは違い、生きていないNodeListです。詳しくは後述。
- 要素ノードから本メソッドの実行が可能です。
生きているHTMLCollectionと生きていないNodeList
childrenプロパティ、document.getElementsByClassName()、getElementsByTagName()、getElementsByName()メソッドで取得したHTMLCollection/NodeListは「生きている」動的な状態です。
これはどういうことかというと、JSでの操作で文書に変更が加えられたら同時に変化するということです。
下記では変数divsは再代入を行っていませんが、中身が変化しているのが分かります。
const divs = document.getElementsByTagName('div');
console.log(divs.length); // -> 0
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);
console.log(divs.length); // -> 1 変化あり
逆に、document.querySelectorAll()メソッドでは「生きていない」状態のNodeListです。
const divs = document.querySelectorAll('div');
console.log(divs.length); // -> 0
const newDiv = document.createElement('div');
document.body.appendChild(newDiv);
console.log(divs.length); // -> 0 変化なし
生きている状態をうまく生かすと便利なことがあります。
例えば下記のような動的に追加した要素に、そのままイベントを適用させることが可能です。
逆にこの特性が邪魔になる場合は、静的なコピーを取ってから処理する必要があります。
- NodeListを返すnode.childNodesプロパティは、例外的に「生きている」NodeListを返します。
- HTMLCollectionは上述したメソッド以外に下記プロパティから取得できます。
- document.anchors
- document.forms
- document.images
- document.links
- node.children
HTMLCollectionとNodeListのその他の違い
それぞれ独自のプロパティとメソッドを持っています。
HTMLCollectionでは「id」と「name」から要素の抽出が可能です。
<div id="div1"></div>
<div class="div2"></div>
<div data-hoge="div3"></div>
<div name="div4"></div>
const divs1 = document.getElementsByTagName('div');
const divs2 = document.querySelectorAll('div');
// HTMLCollectionのプロパティを列挙
for (let key in divs1) {
console.log(key); // -> 0, 1, 2, 3, div1, div4, length, item, namedItem
}
// NodeListのプロパティを列挙
for (let key in divs2) {
console.log(key); // -> 0, 1, 2, 3, length, item, entries, forEach, keys, values
}
console.log(divs1['div1']) // -> <div id="div1"></div>（ノードオブジェクト）
console.log(divs1['div4']) // -> <div name="div4"></div>（ノードオブジェクト）
HTMLCollectionとNodeListの見分け方
constructorプロパティを使うのが簡単です。
const divs1 = document.getElementsByTagName('div');
const divs2 = document.querySelectorAll('div');
console.log(divs1.constructor); // -> ƒ HTMLCollection() { [native code] }
console.log(divs2.constructor); // -> ƒ NodeList() { [native code] }
しかし@think49さんからのご指摘の通り、constructorプロパティは書き換えが可能なため注意が必要です。1
おすすめ頂いたObject.prototype.toString()が安定して使えそうです。
const divs1 = document.getElementsByTagName('div');
const divs2 = document.querySelectorAll('div');
divs1.toString = () => 'toStringの中身を置き換える';
console.log(divs1.toString()); // -> 'toStringの中身を置き換える'
console.log(Object.prototype.toString.call(divs1)); // -> [object HTMLCollection]
console.log(Object.prototype.toString.call(divs2)); // -> [object NodeList]
上記のように、対象のオブジェクトのtoString()メソッドを上書きされてもcallオブジェクトから呼び出すことでオブジェクトを表す文字列を取得できます。
DOM Level 0 documentプロパティで要素を取得できる
W3CによるDOMの標準化前のレガシーなDOMはDOM Level 0と呼ばれています。 正式な仕様ではありませんがDOM Level 0 と呼ばれる場合があります。1
通称DOM Level 0ではこれまでのnode.childNodesやdocument.getElementById()などプロパティ、メソッドはありませんでした。
その代わりに要素を取得する方法として下記のようなdocumentプロパティがあり、これは標準化が進められた際にも新たに追加されるなど現在でも使用できるプロパティです。（下記は一部です）
| プロパティ | 概要 |
|---|---|
| document.documentElement | html要素ノードを参照 |
| document.head | head要素ノードを参照 |
| document.body | body要素ノードを参照 |
| document.forms | form要素ノードへの参照を格納したHTMLCollection |
| document.images | img要素ノードへの参照を格納したHTMLCollection |
| document.links | href属性を持つarea要素とa要素ノードへの参照を格納したHTMLCollection |
| document.scripts | script要素ノードへの参照を格納したHTMLCollection |
属性値の取得・設定
属性値は要素ノードのプロパティから、またはメソッドから参照します。
プロパティを使う
基本的には下記の構文で参照します。
要素ノード.属性名
参照後、代入することで設定が可能です。
例）
<p id="text"><a href="http://qiita.com/">Qiita</a></p>
const text = document.getElementById('text');
const anchor = text.firstElementChild;
console.log(text.id); // -> text
console.log(anchor.href); // -> http://qiita.com/
anchor.href = 'http://help.qiita.com/';
console.log(anchor.href); // -> http://help.qiita.com/
注意点
-
属性名が複数単語の場合、2番目の以降の単語を大文字（lowerCamelCase）にする必要があります。
例）
- tabindex -> tabIndex
- maxlength -> maxLength
JavaScriptで予約語になっている属性名の場合はプロパティ名の前に「html」を付けます。
例えばlabel要素のfor属性の場合は「htmlFor」になります。class属性は特殊でclassNameになります。（DOM StandardからはclassListが使えます。1）
属性の一覧を取得
element.attributes
- 要素ノードに設定されている属性の一覧をNamedNodeMapオブジェクトとして取得できます。
- NamedNodeMapオブジェクトは読み出し専用で、属性ノードが配列のような形で格納されています。
- インデックス番号の他に、属性名でその属性ノードにアクセスできます。
- 属性ノードではnameプロパティから属性名、valueプロパティから属性値を取得できます。
例）
<div id="hoge" class="fuga" data-sample="piyo"></div>
const div = document.getElementById('hoge');
console.log(hoge.attributes); // -> NamedNodeMap {0: id, 1: class, 2: data-sample, length: 3}
console.log(hoge.attributes[0]); // -> id="hoge" (属性ノード)
console.log(hoge.attributes[1].name); // -> class
console.log(hoge.attributes[2].value); // -> piyo
メソッドを使う
属性値の取得
element.getAttribute('属性名');
- 指定した属性名がない場合はnull~~もしくは空文字~~が返ります。2
- 指定した属性名があり、属性値が空文字あるいは省略されている場合は空文字が返ります。2
- 属性ノードとして取得したい場合はgetAttributeNode()メソッドを使います。3
属性値の設定
element.setAttribute('属性名', '属性値');
- 属性ノードを設定したい場合はsetAttributeNode()メソッドを使います。3
属性があるかないか
element.hasAttribute('属性名');
属性の削除
element.removeAttribute('属性名');
- 属性ノードとして削除したい場合はremoveAttributeNode()メソッドを使います。3
参考
- 徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)
- NodeList - Web API インターフェイス | MDN
- Node.nodeType - Web API インターフェイス | MDN
- Node.nodeName - Web API インターフェイス | MDN
- HTMLCollection - Web API インターフェイス | MDN
- HTMLCollectionオブジェクト | JavaScript プログラミング解説
- NodeListとHTMLCollectionも別物なので気を付けよう。（DOMおれおれAdvent Calendar 2015 – 13日目） | Ginpen.com
- document - Web API インターフェイス | MDN
- NamedNodeMap - Web API インターフェイス | MDN