16. 웹페이지에 활용하기

1. DOM Document Object Modal

DOM 문서 객체

Dom은 문서 객체 모델로 스크립트 요소로 HTML 문서를 제어할 수 있도록 웹 문서를 객체화 한것을 의미 ⇒ 브라우저의 HTML 파싱에 의해 Dom 형성
Dom은 tree 구조를 가짐
Dom의 각각의 요소는 Node
document 요소 확인해 볼 것

<html lang="ko"><head>
  <title>DOM 예제</title>
</head>
<body>
  <h1 id="title">장 봐올 것</h1>
  <ul>
    <li>당근</li>
    <li>오이</li>
    <li>양파</li>
  </ul>
  <button>알~겠나요?</button>
</body>
</html>

// DOM 구조도로 출력됨
document;

Object.getPrototypeOf(document);

아래의 프로퍼티로 들어가면 인스턴스 형태로 확인 가능
chilren 프로퍼티로 타고들어가 볼 것 - DOM 구조도 반영 확인

globalThis;

HTML 이하 노드들 재귀적으로 출력

// document 내에 html 태그 요소를 선택하는 코드
const html = document.querySelector('html');

console.log(html); // DOM 형태로 출력

console.log(html.children);