DOMとは？
DOM(Document Object Model)で、W3Cが定めているHTMLや、XMLドキュメントにアクセスするためのAPIのことです。
JavaScriptだけでなく、Javaや、Pythonを初めとして様々なプログラミング言語で使うことができる汎用的な技術です。
逆に言えば、JavaScriptは、DOMなしでは、HTMLやCSSにはアクセスができません。
DOM Levelについて
現在は、DOMレベル1～4まで勧告されています。
DOMの利用例
DOMは、世の中でも非常に幅広く利用されています。
例えば、GmailのようなWebアプリでもDOMを介して、構築しています。
DOMの構文
HTMLの操作
HTMLのID属性から要素を探す場合
例えば、下記のようなHTMLの要素があったとしたら。
|
1 |
<p id="sample">test</p> |
JavaScriptでは、下記のようにDOMの記述をすることで、HTMLの要素を取得することができます。
|
1 |
document.getElementById("sample"); |
HTMLのタグ要素を直接探す場合
HTML
|
1 2 3 4 5 |
<ul> <li>test1</li> <li>test2</li> <li>test3</li> <ul> |
JavaScript
|
1 |
document.getElementByTagName('li'); |
なお、「getElementByID」や「getElementsByTagname」は、比較的古いブラウザでも動く安定したメソッドです。
今では呼ばないですが、2000年代はこうした技術を動的にHTMLを変更させることができることから「DHTML（Dynamic HTML）」と呼んでいました。
HTML要素を作り出す場合
|
1 |
document.createElement('div'); |
ただ、作っただけでは、ブラウザに反映されません。
以下のように、bodyタグの配下に追加するようにします。
|
1 2 3 |
var div = document.createElement('div'); var tuika = document.getElementById('tuika'); tuika.appendChild(div); |
CSSを操作する。
CSSを設定する。
|
1 2 3 4 |
var css = document.getElementById('csssousa'); css.style.backgroundColor = '#333'; css.style.border = 'solid 1px #666'; css.style.margin = '3px'; |
ポイントとしては、「styleプロパティ」を使う点でしょう。
また、通常のcssプロパティでは、「background-color」と指定しますが、DOMでは「backgroundColor」というような記述になっています。
これは、「-」は、JavaScriptではマイナス扱いになってしまうため、使えないので、一律ハイフンは、上記のような形に置き換えられてしまっています。注意しましょう。
CSSから値を素得する。
|
1 2 |
var css = document.getElementById('cssget'); getComputedStyle(css,'').color; |
ただし、「getComputedStyle」は、IE8以前では未対応なので注意しましょう。（今ほとんど使われていないと思いますが…。）
HTMLを操作
JavaScriptで、HTMLを操作するには下記の方法に分かれます。（他にもありますが、基本的には下記二つのどちらかです。）
- innerHTML
- DOM API
innerHTML
特徴
取得した要素の内部のHTML構造をそのままテキスト情報として保持しています。
非常にシンプルで、コードの中に記述されたHTML文字列を、そのままHTMLとして出力してくれます。
用途としては、非常にお手軽にHTMLをいじったり操作をする場合に使います。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>innerHTML</title> <script> window.onload = function () { //naiyouというIDがついた要素を取得 var naiyou = document.getElementById('naiyou'); //contentsの中のHTMLを書き換える naiyou.innerHTML = '<ul>' + '<li>inner1</li>' + '<li>inner2</li>' + '<li>inner3</li>' + '</ul>'; } </script> </head> <body> <div id="container"> <h1 class="title">innerHTMLテスト</h1> <div id="naiyou"></div> </div> </body> </html> |
実行結果
DOM API
特徴
HTMLの高度な操作をすることができます。（例えば、3個あるリスト要素の2番目に新しい要素を追加したいといった場合等）
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOM APIテスト</title> <script> window.onload = function () { //Styleを適用するためのボタン要素を取得する var btn = document.getElementById('btn'); //取得したボタンがクリックしたときのアクションを設定する btn.addEventListener('click', function () { //li要素を新規に生成 var li_element = document.createElement('li'); //生成したli要素の中のHTMLを書き換え li_element.innerHTML = 'DOM4'; //生成したli要素を追加する対象（ul要素）を取得 var ul = document.querySelector('#naiyo > ul'); //生成したli要素をul要素の最後の要素として追加 ul.appendChild(li_element); }, false); } </script> </head> <body> <div id="container"> <h1 class="title">DOM APIテスト</h1> <div id="naiyo"> <ul> <li>DOM1</li> <li>DOM2</li> <li>DOM3</li> </ul> </div> <p><input type="button" id="btn" value="DOM API実行" /></p> </div> </body> </html> |
実行結果
初期表示時
押した後
この記事へのコメントはありません。