親要素、子要素、兄弟要素を取得する - Javascript

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

<div class="wrapper">
  <ul id="box1">
    <li id="list1_1" class="list">List 1-1</li>
    <li id="list1_2" class="list">List 1-2</li>
    <li id="list1_3" class="list">List 1-3</li>
  </ul>
  <ul id="box2">
    <li id="list2_1" class="list">List 2-1</li>
    <li id="list2_2" class="list">List 2-2</li>
    <li id="list2_3" class="list">List 2-3</li>
  </ul>
</div>

クリックした「 li 」要素から見てJavascriptで各要素を取得します。

親要素の取得

クリックした li 要素の親要素の id を取得します。

window.addEventListener('load', () => {
  const list = document.getElementsByClassName('list');

  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
      console.log(this.parentNode.id)
    });
  }
});

クリックした id box1 の子要素の li タグの親要素と隣あう次の要素（id box2）を取得します。

次の親要素がない場合は、「 Uncaught TypeError 」が発生します。

window.addEventListener('load', () => {
  const list = document.getElementsByClassName('list');

  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
      console.log(this.parentNode.nextElementSibling.id)
    });
  }
});

クリックした id box2 の子要素の li タグの親要素と隣あう前の要素（id box1）を取得します。

window.addEventListener('load', () => {
  const list = document.getElementsByClassName('list');

  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
      console.log(this.parentNode.previousElementSibling.id)
    });
  }
});

子要素の取得

クリックした li タグ（id=box1 の子要素）の親要素の次の親要素（id=box2）の子要素を取得します。

id=box2 の li タグを句リクした場合は、次の親要素がないため、「 Uncaught TypeError 」が発生します。

window.addEventListener('load', () => {
  const list = document.getElementsByClassName('list');

  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", function() {
      let next_box_children = this.parentNode.nextElementSibling.children
      Array.from(next_box_children).forEach(function(e){
        console.log(e)
      })
    });
  }
});

兄弟要素の取得

id=list1_2 の li タグをクリックすると前後の兄弟要素（id=list1_1, id=list1_3）の要素を取得します。

window.addEventListener('load', () => {
  const ele = document.getElementById('list1_2');

  ele.addEventListener('click', function(){
    console.log(this.previousElementSibling.id)
    console.log(this.nextElementSibling.id)
  })
});