【DOM連載#1】JavaScriptのDOMでHTML要素を参照
最近DOMについて改めて学びなおし、気づきが多かったので連載という形で書き残しておこうと思う。1回目はDOMでのHTML要素の参照について。まずDOMとは何かについて、一応引用しておく。
Document Object Model (DOM) は HTML や XML 文書のためのプログラミング・インターフェースです。そして文書の構造化された表現を提供し、プログラムから文書の構造やスタイル、コンテントを変更するためにその構造にアクセスする方法を定義します。
MOZILLA DEVELOPER NETWORK
DOMを使ってHTMLの要素にアクセスし、JavaScriptで動的に書き換えることができる。その中で今日はDOMで要素にアクセスする方法について書いていく。以下、目次。
基本のdocumentオブジェクト4つ
1. document.getElementById()
2. document.getElementsByTagName()
3. document.getElementsByClassName()
4. document.getElementsByName()
4つのdocumentオブジェクトを支えるelementオブジェクトの注意点
elementオブジェクトのプロパティ[要素間の文字列要考慮]
5. element.childNodes
6. element.firstChild
7. element.lastChild
8. element.nextSibling
9. element.previousSibling
elementオブジェクトのプロパティ[要素間の文字列考慮不要]
10. element.children
11. element.parentNodes
12. element.childElementCount
13. element.firstElementChild
14. element.lastElementChild
15. element.nextElementSibling
16. element.previousElementSibling
本記事に記載しているサンプルコードは、以下のHTMLがあることを前提とする。
<body> <p id="target">Test</p> <ul id="list"> <li name="list" class="list">One</li> <li name="list" class="list">Two</li> <li name="list" class="list">Three</li> </ul> </body>
基本のdocumentオブジェクト4つ
まずはこれだけ覚えておけばDOMでの要素参照はOK。まぁ、基本ですな。
1. document.getElementById()
idを指定することで要素を特定する。とりあえずidさえ指定しておけば使えるので最も簡単。
document.getElementById('target').innerHTML // Test
1点注意。もしHTML内で意図せず同一idを複数個所に指定してしまった場合、ByIdで要素を参照すると最初に見つけたものしか参照されない。よってHTML内のid管理はしっかりしておこう。以下の記事ではclassについて書かれているが、idにおいても命名方法の参考となる。
jsで利用するDOMの名前をどうやってつけたらよいのか
2. document.getElementsByTagName()
タグ名指定で要素を選択。Elementsと複数形になっていることに注目。つまりByIdのようにこれだけで要素の特定は出来ないということをあらわしている。まずByTagNameで対象となる要素は配列の形で渡される。
document.getElementsByTagName('li') // ({0:({}), 1:({}), 2:({})})
これに添え字を与えて要素を特定する。例えば"Two"を表示させるには[1]の添え字を与える。
document.getElementsByTagName('li')[1].innerHTML // Two
3. document.getElementsByClassName()
class指定で要素を選択。こちらもByTagName同様にElementsと複数形であることから分かるように、まずは配列を受け取る。
document.getElementsByClassName('list') // ({0:({}), 1:({}), 2:({})})
これに添え字を与えて要素を特定する。例えば"Three"を表示させるには[2]の添え字を与える。
document.getElementsByClassName('list')[2].innerHTML // Three
4. document.getElementsByName()
name指定で要素を選択。こちらもByTagName同様にElementsと複数形であることから分かるように、まずは配列を受け取る。
document.getElementsByName('list') // ({0:({}), 1:({}), 2:({})})
これに添え字を与えて要素を特定する。例えば"Three"を表示させるには[2]の添え字を与える。
document.getElementsByName('list')[2].innerHTML // Three
4つのdocumentオブジェクトを支えるelementオブジェクト:注意点
これらはdocumentオブジェクトと組み合わせることで、多様な要素選択を実現するものである。CSSのセレクタのような感じかな。
elementオブジェクトのプロパティは大きく"要素間の文字列を考慮するか否か"で2つに分けられる。まずはこの点について解説する。
以下のスクリプトを実行してみてほしい。これはul要素の配下にある子要素(つまりli要素)の数をカウントしている。
document.getElementById('list').childNodes.length // 7
li要素は3つしかないのに結果が7となる。
これは要素間の文字列(改行やインデント含む)もカウント対象となっているからだ。\nは改行の意味。
そこで要素間の文字列を一切省くよう以下の通りHTMLを修正したうえで、同様にスクリプトを実行したらどうなるか。
<ul id="list"><li name="list">one</li><li name="list">Two</li><li name="list">Three</li></ul>
すると結果は3となる。Firefoxコンソールの出力結果からもTextが無くなっていることがわかるだろう。
ということでこの点を理解してもらったうえで以下でelementオブジェクトのプロパティを紹介していく。
サンプルコードを短縮するため、以下の変数を定義する。
var e = document.getElementById('list');
elementオブジェクトのプロパティ[要素間の文字列要考慮]
5. element.childNodes
該当する子要素を配列で受け取り、添え字を与えて参照する。
e.childNodes; // ({0:({}), ~ 5:({})}) e.childNodes[1].innerHTML; // One
6. element.firstChild
最初の子要素を参照する。
e.firstChild.data; // "\n "
7. element.lastChild
最後の子要素を参照する。
e.lastChild.data; // "\n"
8. element.nextSibling
1つ次の要素を参照する。
e.firstChild.nextSibling.innerHTML; // One
9. element.previousSibling
1つ前の要素を参照する。
e.lastChild.previousSibling.innerHTML; // Three
elementオブジェクトのプロパティ[要素間の文字列考慮不要]
10. element.children
該当する子要素を配列で受け取り、添え字を与えて参照する。
e.children; // ({0:({}), 1:({}), 2:({})}) e.children[0].innerHTML; // One
11. element.parentNodes
親要素を参照する。
document.getElementsByTagName('li')[0].parentNode.localName; // ul
12. element.childElementCount
子要素の数を得る。
e.childElementCount; // 3
13. element.firstElementChild
最初の子要素を参照する。
e.firstElementChild.innerHTML; // One
14. element.lastElementChild
最後の子要素を参照する。
e.lastElementChild.innerHTML; // Three
15. element.nextElementSibling
1つ次の要素を参照する。
e.firstElementChild.nextElementSibling.innerHTML; // Two
16. element.previousElementSibling
1つ前の要素を参照する。
e.lastElementChild.previousElementSibling.innerHTML; // Two
DOMで要素を参照する方法が何通りもあることがお分かりいただけたかと思う。これらをしっかり覚えておくと要素の参照に困ることはそうそう無いし、今後の要素の編集、追加、削除の基礎となるものであるので、理解しておくとよいと思う。
というわけで今回は以上!