[JS初心者]#2 DOM編 JavaScriptを学ぶ
DOMとは？
マークアップ言語をオブジェクトの集合として操作するためのモデル（Document Object Model）で、JavaScriptにはDOMを操作するAPIが実装されている。
ノード
タグで囲まれたテキスト等のオブジェクトをノードと言います。
<div id='hoge' class='piyo'>
fugafuga
</div>
これでいうと、divタグでくくられたものをノードと言って、
divは要素ノード
divの属性である、id='hoge'やclass='piyo'は属性ノード
divタグの中にあるfugafugaはテキストノード
と言います。
- 要素ノード
- 属性ノード
- テキストノード
DOMによる操作（取得）
操作（取得、削除、追加）をするために、要素を取得する必要があります。
- 要素リストの取得
- タグ名やID値などをキーとして指定
- 階層構造における相対位置を指定
のようにして、DOMを取得して操作することができます。
要素リストの取得
要素を直接指定してIDを取得してみる
<form id='hoge1'></form>
<form id='hoge2'></form>
<form id='hoge3'></form>
<script>
window.onload = function() {
alert(document.forms[0].id);
alert(document.forms[1].id);
alert(document.forms[2].id);
}
</script>
これで、alertにより、hoge1-3まで順番に表示されることで、要素が全部取得できていることがわかった。
タグ名やID値などをキーとして指定
指定するときのメソッド一覧
| メソッド名 | 意味 |
|---|---|
| getElementById() | ID値をキーに要素を取得 |
| getElementsByTagName() | タグ名をキーに要素のリストを取得 |
| getElementsByClassName() | class名をキーに要素のリストを取得 |
※ ID以外は複数形（リスト）になっていることに注意
- getElementById()
<div id='hoge1'></div>
<div id='hoge2'></div>
<div id='hoge3'></div>
<script>
window.onload = function() {
alert(document.getElementById('hoge1').id);
}
</script>
これでhoge1が表示される
- getElementsByTagName()
<div id='hoge1'></div>
<div id='hoge2'></div>
<div id='hoge3'></div>
<script>
window.onload = function() {
alert(document.getElementsByTagName('div')[0].id);
alert(document.getElementsByTagName('div')[1].id);
alert(document.getElementsByTagName('div')[2].id);
}
</script>
これでhoge1-3が表示される
- getElementsByClassName()
<div id='hoge1' class='fuga'></div>
<div id='hoge2' class='fuga'></div>
<div id='hoge3' class='fuga'></div>
<script>
window.onload = function() {
alert(document.getElementsByClassName('fuga')[0].id);
alert(document.getElementsByClassName('fuga')[1].id);
alert(document.getElementsByClassName('fuga')[2].id);
}
</script>
これでhoge1-3が表示される
階層構造における相対位置を指定
| プロパティ名 | 意味 |
|---|---|
| parentNode | 一段上（親）の要素 |
| previousSibling | 同じレベル（兄弟姉妹）で前にある要素 |
| nextSibling | 同じレベル（兄弟姉妹）で次にある要素 |
| firstChild | 一段下（子）で最初の要素 |
| lastChild | 一段下（子）で最後の要素 |
<div id='hoge1'>
<div id='hoge2' class='fuga'>hoge2</div>
<div id='hoge3' class='fuga'>hoge3</div>
</div>
<script>
window.onload = function() {
alert(document.getElementsByClassName('fuga')[0].nextSibling.nextSibling.id);
}
</script>
これで、hoge3が取得できる
DOMによる操作（生成）
ノードを生成するメソッド
| メソッド名 | 意味 |
|---|---|
| createElement() | 要素のノードを生成 |
| createAttribute() | 属性のノードを生成 |
| createTextNode() | テキストのノードを生成 |
| createCDATASection() | CDATAセクションのノードを生成 |
| createComment | HTML/XMLのコメントのノードを生成 |
| createEntityReference() | 実体を参照するノードの生成 |
| createProccessingInstrction() | 処理命令のノードを生成 |
| createDocumentFragment() | ドキュメントのフラグメントのノードを生成 |
DOMによる操作（追加）
ノードを追加するメソッド
| メソッド名 | 意味 |
|---|---|
| appendChild() | 最後の子として追加 |
| insertBefore() | 第2パラメータで指定したノードの直前に挿入 |
DOMによる操作（削除）
ノードを削除するメソッド
| メソッド名 | 意味 |
|---|---|
| removeChild() | 指定した要素の削除 |
属性の追加・削除・取得
| メソッド名 | 意味 |
|---|---|
| createAttribute() | 属性ノードの生成 |
| setAttributeNode() | パラメータに指定された属性ノードを追加 |
| hasAttribute() | パラメータに指定された属性の有無を返却 |
| removeAttribute() | パラメータに指定された属性の削除 |