【JavaScript】ノードウォーキング/要素の取得方法

【DOMツリー階層関係からの要素指定方法】

①例：ulの子要素liを取得したい場合
ul.childNodes(ulの全ての子ノードを取得)
ul.children(ulの中の全ての子要素ノードだけを取得)
ul.firstChild(ulの中の最初の子ノードだけを取得)
ul.lastChild(ulの中の最後の子ノードだけを取得)
ul.firstElementChild(ulの中の最初の要素ノードだけを取得)
ul.lastElementChild(ulの中の最後の要素ノードだけを取得)

②例：liから親要素ulを指定したい場合
li.parentNode

③例：liから兄弟要素を指定したい場合
li.previousSibling(一つ前の兄弟ノード指定)
li.nextSibling（一つ後ろの兄弟ノード指定）
li.previousElementSibling（一つ前の兄弟要素ノード指定）
li.nextElementSibling（一つ後ろの兄弟要素ノード指定）

◆テキストにあった例を実践してみた :
id=foodの配下にある要素を取り出し列挙させる。

タグ間にある改行や空白もテキストノードと見なされるので、上記例では、if文で要素ノードを判定している。(要素ノードの場合、戻り値が１)

childNodeプロパティ使用の場合は、要素の子ノード(テキストノード含む)全てを取得してきてしまうので、要素ノードだけを取得したい場合はchildrenプロパティを使用すると子要素ノードのみを取得できる。

結果はどちらも、value属性の値が列挙されてくる。
ので、ある要素の子要素ノードのみ取得してきたい場合はchildrenを使用するのが短くすみますね。

child・sibling指定だけでは要素ノード、テキストノードどちらも取得してきてしまう。よって、あらかじめ要素ノードだけを指定できるElementが入った指定方法、（あとchildren）を使用した方が良いのかなという印象。

ちなみにこのテキストではchildrenプロパティは載っていないようで、ドットインストールでやっていたのを見て、こっちのが楽だなと思いました。新しいやり方なのかな？

c.sakyou