親・子・兄弟要素の取得

特定の要素ノードから見た親要素、子要素、兄弟要素のノードを取得する方法について見ていきます。

これは例えば、ボタンをクリックした際に、親要素に何か追加したり、子要素に変更を加えたい時に役立ちます。

・親要素を取得

　node.parentElement

// 特定のノードの親要素のノードを取得する場合

　const eparent = element.parentElement;

上記のように記述します。

サンプルで実際に取得したものになります。

このようにparentElement プロパティを連結させ、どんどん辿っていくことが可能です。

・子要素を取得

node.children

const echildren = element.children;

親に対して子は複数存在するので「child」 ではなく「children」 となります。

children プロパティを使うことで下記のように取得できます。

また配列っぽく見えますが配列ではありません。しかし、配列のように一つ一つの要素にアクセスすることは可能です。

・兄弟要素を取得

指定した要素の次の兄弟要素を取得するには「nextElementSibling」

前の兄弟要素を取得するには「previousElementSibling」を使います。

兄弟要素も上記のように取得できます。