TIL36: DOM - 1

DOM : JavaScript를 이용해 HTML을 동적으로 제어하기 위해 웹문서를 Tree 구조로 객체화 시킨 것

• Chrome Console에서 아래의 명령을 실행해서 대상 객체의 구조를 확인할 수 있습니다.

  console.dir(document.body);

• 또한, Chrome Browser에 아래의 플러그인을 설치하여 Tree 구조를 확인할 수도 있습니다.

  관련 Chrome Extension: HTML Tree Generator

Node 는 Element 보다 포괄적인 상위 개념

• 현재의 Element에서 가장 가까운, Selector에 해당되는 부모(상위) Element를 찾는 메소드

  targetElement.closest(selector);

• 모든 자식 Node를 포함하고 있는 속성

  const children = document.body.children;
  
  children[0] // 웹페이지에서 첫번째 node
       :
  children[n]