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要素を取得する
|
1 |
var element = document.getElementById('idname'); |
IDは1ページ内に1つしか出現しないというルールがあるので、これで取得できるタグは1つだけということになります。
クラスを指定してHTML要素を取得する
|
1 2 3 4 |
var elements = document.getElementsByClassName('classname'); for (var i = 0; elements.length; i++) { // 各要素(elements[i])の処理を書く } |
クラスは1ページ内に複数存在するため複数のHTML要素が取得出来ます。
メソッド名も getElementsByClassName と複数取得する前提でつけられています。
結果も複数のHTML要素が配列で返ってきます。
名前を指定してHTML要素を取得する
|
1 |
var element = document.getElementsByName('btnname'); |
名前はinputタグによく使われます。
だから1ページに1つしか無いと思われがちですが、同じフォームが複数存在する場合があるため1ページで言うと複数存在します。
その為名前を指定して取得できる要素も複数になります。
タグ名を指定してHTML要素を取得する
|
1 |
var elements = document.getElementsByTagName('p'); |
タグももちろん複数存在します。
親要素を取得する
|
1 2 |
var element = document.getElementById('idname'); var pe = element.parentNode; |
クラス名で要素を取得した場合など結果が複数取得出来る場合は、インデックスを指定するなどして1件の要素にし、その要素に対して親要素を取得します。
子要素を取得する
|
1 2 |
var element = document.getElementById('idname'); var ces = element.childNodes; |
ただし、親は常に１つしかありませんが、子は複数ある場合があります。
childNodes も複数形になっています。
子要素を操作する場合にはループして取得したい子要素を操作するようになります。
|
1 2 3 4 5 |
var element = document.getElementById('idname2'); var ces = element.childNodes; for (var i = 0; ces.length; i++) { // 子要素(ces[i])の処理 } |
スタイルを変更する
|
1 2 |
var element = document.getElementById('idname'); element.style.color = '#ff0000'; |
取得した要素に対し、style を使いスタイルを動的に変更することが出来ます。
上の例は文字の色を変更する書き方です。
値の取得・変更
|
1 2 3 |
var element = document.getElementById('btnname'); var elementValu = element.value; // 値を取得 element.value = "あいうえお"; // 値を変更 |
inputタグを使う場合は value プロパティで値を指定することが出来ます。
この値を取得したり変更したり出来ます。
まとめ
操作方法については一部だけのご紹介でしたが、ノードの取得方法について説明しました。
JavaScriptを使うと画面に表示されたHTMLを操作出来ます。
この操作するときに使うメソッドやプロパティをDOM APIといいます。
次はjQueryで上で書いたことと同じことをしてみます。
コメントを残す