TRYING
TO BE
A FRONT-END
ENGNNER

【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の配下にある要素を取り出し列挙させる。

HTMLソース
JSソース

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

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

chilrenプロパティで子要素のみ取得してきているため、
if文不要

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

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

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

c.sakyou

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です