DOM (Document Object Model)とは

DOMはドムって読むんですかね?

Document Object Model の略です。

ブラウザ全体を管理するwindowオブジェクトの中にdocumentオブジェクトというものがあります。

documentオブジェクトは、HTMLのbodyタグの中にあるHTMLタグをコントロールするためのオブジェクトです。

このdocumentを使ってHTMLのタグを操作するAPIをDOMといいます。

Document Object Model (DOM) は、HTML文書やXML文書を各種プログラムから利用するための仕組みである[1]。WHATWGがLiving Standardとして定義している。

WHATWG以前はW3Cが仕様を策定しており、Level 1からLevel 4まで勧告している。

引用:wiki

なにやらレベル分けされているようですが、ここではレベルは無視して実際の使い方を中心に説明します。

ノードとは

HTMLは開始タグと終了タグがあり、その中にテキストや別のタグを書いてツリー構造で構築する言語です。

つまり全てのタグに、親要素や子要素があるわけです。

このツリー構造のそれぞれの要素のことをノードと言います。

DOMはこのノードを取得し、ノードの情報を取得したり書き換えたりしながら操作します。

 

ノードは、HTMLタグやプロパティ、タグ内のテキストや子タグなどの情報を持ちます。

別もののようですが、僕は要素という言葉の方がしっくりきます。

IDを指定してHTML要素を取得する

IDを指定して、HTML要素を取得する方法です。

IDは1ページ内に1つしか出現しないというルールがあるので、これで取得できるタグは1つだけということになります。

クラスを指定してHTML要素を取得する

クラス名を指定してHTML要素を取得する方法です。

クラスは1ページ内に複数存在するため複数のHTML要素が取得出来ます。

メソッド名も getElementsByClassName と複数取得する前提でつけられています。

結果も複数のHTML要素が配列で返ってきます。

名前を指定してHTML要素を取得する

名前というのは、name プロパティで指定した名前のことです。

名前はinputタグによく使われます。

だから1ページに1つしか無いと思われがちですが、同じフォームが複数存在する場合があるため1ページで言うと複数存在します。

その為名前を指定して取得できる要素も複数になります。

タグ名を指定してHTML要素を取得する

タグ名を指定してHTML要素を取得する方法です。

タグももちろん複数存在します。

親要素を取得する

ある特定の要素を取得した場合、その親要素を取得出来ます。

クラス名で要素を取得した場合など結果が複数取得出来る場合は、インデックスを指定するなどして1件の要素にし、その要素に対して親要素を取得します。

子要素を取得する

特定の要素の子要素を取得出来ます。

ただし、親は常に1つしかありませんが、子は複数ある場合があります。

childNodes も複数形になっています。

子要素を操作する場合にはループして取得したい子要素を操作するようになります。

スタイルを変更する

取得した要素に対し、style を使いスタイルを動的に変更することが出来ます。

上の例は文字の色を変更する書き方です。

値の取得・変更

value を使って値を取得・変更することが出来ます。

inputタグを使う場合は value プロパティで値を指定することが出来ます。

この値を取得したり変更したり出来ます。

まとめ

操作方法については一部だけのご紹介でしたが、ノードの取得方法について説明しました。

JavaScriptを使うと画面に表示されたHTMLを操作出来ます。

この操作するときに使うメソッドやプロパティをDOM APIといいます。

次はjQueryで上で書いたことと同じことをしてみます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA