JavaScript:親、子、兄弟要素を参照する

goto_jp 1,573views 更新:2014年10月22日

親要素

var parent = this.parentNode;
<div class="oya"> ←このdiv要素が親になる
  <button onclick="">ボタン</button> ←ここがthisなら
</div>

起点のすぐ上の要素が親となる。

子要素

var childs = this.childNodes;
<div class="oya"> ←ここがthisなら
  <p>~~~</p> ←子
  <p>~~~</p> ←子
  <div>~~~</div> ←子
</div>

起点の中の要素すべてが子になり、配列で返してくる。

兄弟要素

var prev = this.previousSibling;
var next = this.nextSibling;
<div>~~~</div>
<div>~~~</div> ←previousSibling
<button onclick="">ボタン</button> ←ここがthisなら
<p>~~~</p> ←nextSibling
<p>~~~</p>

previousSiblingは並行する直前の要素を、nextSiblingは並行する直後の要素を参照できる。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません