Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

【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で要素を参照する方法が何通りもあることがお分かりいただけたかと思う。これらをしっかり覚えておくと要素の参照に困ることはそうそう無いし、今後の要素の編集、追加、削除の基礎となるものであるので、理解しておくとよいと思う。
というわけで今回は以上!