JS-DOM

DOM(Document Object Model)문서 객체 모델

• 자식요소 탐색하는법
  • 부모요소.querySelector()
  • 부모요소.children
• 형제요소 탐색
  • 이전형제요소 탐색 : 형제요소.previousElementSibling
  • 다음형제요소 탐색 : 형제요소.nextElementSibling
• 부모요소 탐색
  • 현재요소.parentElement;
  • 현재요소.closest()

자식요소 예제

const wrap = document.querySelector('#wrap');
const box2 = wrap.querySelector(".box2");
const children = wrap.children;

형제요소 예제

const wrap = document.querySelector('#wrap');
const children = wrap.children;

const box2 = wrap.querySelector(".box2");
const prevEl = box2.previousElementSibling
const nextEl = box2.nextElementSibling;

부모요소 예제

const a = box2.querySelector("a");
const parentEl = a.parentElement;
console.log(parentEl);