▲TOPへ戻る

【javascript】親要素、子要素、兄弟要素を取得する

親要素
子要素1
子要素2
子要素3

HTMLは以下の通りです。親要素、子要素、兄弟要素を取得してみましょう。

HTML
  <div class="parent_box">
    <div class="box1">子要素1</div>
    <div class="box2">子要素2</div>
    <div class="box3">子要素3</div>
  </div> 

子要素の取得

children

javascript
  console.log(box.children);
子要素取得

親要素クリックしてみてください。

親要素
子要素1
子要素2
子要素3

firstElementChild 最初の子要素

javascript
  console.log(box.firstElementChild); 
最初の子要素取得

親要素クリックしてみてください。

子要素1
子要素2
子要素3
親要素

lastElementChild 最後の子要素

javascript
  console.log(box.lastElementChild); 
最後の子要素取得

親要素クリックしてみてください。

親要素
子要素1
子要素2
子要素3

兄弟要素の取得

nextElementSibling 次の兄弟要素

  console.log(box.children[0].nextElementSibling); 
次の子要素取得

子要素1クリックしてみてください。

子要素1
子要素2
子要素3
親要素

previousElementSibling 前の兄弟要素

  console.log(box.children[2].previousElementSibling); 
前の子要素取得

子要素3クリックしてみてください。

親要素
子要素1
子要素2
子要素3

親要素の取得

parentNode

  console.log(box.childeren.parentNode); 
  // 親要素の子要素の親を取得
  // あえてこんな書き方はしませんが
親要素取得

子要素クリックしてみてください。

親要素
子要素1
子要素2
子要素3
point

children:子要素

firstElementChild:最初の子要素

lastElementChild:最後の子要素

nextElementSibling:次の兄弟要素

previousElementSibling:前の兄弟要素

parentNode:親要素

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ