169
164

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScript DOM操作再入門①

Last updated at Posted at 2016-07-04

概要

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の作成に関して解説します。

続きは次回

169
164
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
169
164

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?