<main>
  <secition>
    <article>
      <ul class="list">
        <li class=item_1>최종1</li>
        <li class=item_2>최종2</li>
        <li class=item_3>최종3</li>
        <li class=item_4>최종4</li>
      </ul>
    </article>
  </section>
</main>
//parentElement
//자식을 기준으로 부모요소 선택하기
const item_2=document.querySelector('.item_2');
const parent=item_2.parentElement
console.log(parent);

//closest()
//직계부모 외 상위부모 객체 선택 시 사용
const top_parent=item_2.closest('main');
console.log(top_parent);

//children
//부모의 자식요소 선택
const list=document.querySelector('.list');
const items=list.children
for(i of items){
  console.log(i)
}

//previousElementSibling
//nextElementSibling
//기준 객체 앞/뒤의 형제요소 선택
const item_3=document.querySelector('.item_3');
console.log(item_3.previousElementSibling);
console.log(item_3.nextElementSibling)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.