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