TIL36: DOM - 1

charlie-lyc·2020년 9월 24일
0

Pre Course TIL

목록 보기
36/45
post-thumbnail

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

  • Chrome Console에서 아래의 명령을 실행해서 대상 객체의 구조를 확인할 수 있습니다.
  console.dir(document.body);
  • 또한, Chrome Browser에 아래의 플러그인을 설치하여 Tree 구조를 확인할 수도 있습니다.

    관련 Chrome Extension: HTML Tree Generator

NodeElement 보다 포괄적인 상위 개념

  • 현재의 Element에서 가장 가까운, Selector에 해당되는 부모(상위) Element를 찾는 메소드
  targetElement.closest(selector);
  • 모든 자식 Node를 포함하고 있는 속성
  const children = document.body.children;
  
  children[0] // 웹페이지에서 첫번째 node
       :
  children[n]

0개의 댓글