概要
Angular2やReactをメインで使っていると、ちょっとした事でjQueryに頼るのが疎ましくなってきます。
特にDOM操作は基本jQueryで行ってきたのですが、生のJavaScriptでDOM操作をしたいという思いがあり、再度JavaScriptのDOM操作を調査したいと思います。
DOMとは
そもそもDOMとは何でしょうか。
DOMとは Document Object Model の略でHTMLやXMLを取り扱うための「API」です。
DOMを利用する事で、HTMLの探索やスタイルの変更・イベントの設定・HTML要素の取得の他に、振る舞いを変えたり、ユーザー操作時の処理を設定することができます。
DOMツリー
DOMを押さえる上で重要なのが、「DOMツリー」です。
各HTML要素は入れ子でマークアップされていきます。
その入れ子をツリーで表現しているものになります。
DOMのルートは、 [Document] となっており、document以下にhtmlが存在し、html以下にhead, bodyがあります。
DOMツリーをしっかりイメージ出来ていれば、DOM操作の習得はどんどん楽になると思います。
ノード
英語で「Node」, 日本語で「節」という意味です。
ざっくりいうと、タグの事です。DOM上では「ノード」と表現します。
ノードの種類
| ノード | ノードタイプの定数 | ノードタイプの値 | インタフェース |
|---|---|---|---|
| 要素ノード | ELEMENT_NODE | 1 | Element |
| 属性ノード | ATTRIBUTE_NODE | 2 | Attr |
| テキストノード | TEXT_NODE | 3 | Text |
| コメントノード | COMMENT_NODE | 8 | Comment |
| 文書ノード | DOCUMENT_NODE | 9 | Document |
DOMでは、HTMLのタグやテキストが全て上記のどれかに当てはまる事になります。
DOMの操作とは、DOMツリーのノードにアクセスして、DOMを書き換えたり、追加したりするという事です。
Documentオブジェクト
よく生のJavaScriptのDOM操作で登場する、
document.getElementById('foo');
の、documentはDocumentオブジェクトといい、HTMLドキュメント全体を表すオブジェクトです。
これがDOMの最上位のノードとなります。
DOM操作を行う上で、非常にウェイトの高いオブジェクトになります。
Documentオブジェクトは、windowオブジェクトのプロパティですが、windowは省略できる為、この様な記述になります。
また、直接bodyにアクセスしたい場合は、
document.body;
で、アクセスする事も可能です。
要素の取得
Documentオブジェクトを使えばDOMツリーのノードにがんがんアクセスする事が可能です。
| Method | Description |
|---|---|
document.getElementById('foo') |
id="foo"のノードを取得する。 |
document.getElementsByTagName('p') |
HTML内のpElementのノードを取得する。 |
document.getElementsByClassName('hoge') |
class="hoge"のノードを取得する。 |
document.querySelector('#foo') |
CSSセレクタを指定してノードを取得する。(単一) |
document.querySelectorAll('.foo') |
CSSセレクトで指定してノードを取得する。(複数) |
複数ノードが存在する場合は、返り値は配列になります。
SelectorAPIは柔軟な指定ができるものの、動作パフォーマンスは少し下がります。
後、重要な点としては、下記のライブオブジェクトには対応していないという事です。
これを知らなければ思わぬミスに繋がってしまいます。
ライブオブジェクト
複数のノードを取得した場合(NodeList)、プログラム上で変数に格納されたとしても、プログラムの途中でNodeListの中身が増えると、取得するNodeListも変更されます。
NodeListは動的な参照を持っており、 常にDOMツリーを参照しているので、要素の数が増えたり減ったりしても、再取得する必要はありません。
終わり
DOMの操作に関しての基本を解説してきました。
次回は、DOMの取得の続きと、DOMの作成に関して解説します。
続きは次回。