DOM 개념
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
DOM은 웹개발의 개념으로, 작성된 HTML코드를 분석하여 데이터와 브라우저의 내부를 표현한 것이라고 한다.
브라우저는 HTML코드를 분석(parsing)하여 화면에 표시할 내용이 무엇인지 알게된다.
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
parsing단계에서 브라우저는 HTML코드를 자바스크립트의 객체 묶음으로 해석한다. 이 객체들은 HTML 구조를 나타내기 위해 서로 중첩된다.
(실제로는 이것보다 더 복잡하지만 대강 이런 방식이라고 한다.)
자바스크립트 코드는 이렇게 자바스크립트의 객체들로 해석된 것을 보고 DOM과 상호작용할 수 있다. 그러므로 브라우저의 HTML코드의 내부 표현을 조작하거나 데이터를 뽑아오는게 가능해진다.
정리하자면 DOM은 브라우저에서 HTML코드를 조작하거나 데이터를 뽑아 오기 위해 분석된 HTML코드에 접속할 수 있도록 해준다. 이런 방식으로 입력된 데이터의 수에 따라 변화하는 글자수를 넣어주는 등의 상호작용이 가능해진다.
+ DOM을 시작하는 것은 document 객체이다. 이 객체를 통하여 DOM에 접근한다.
DOM살펴보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced javascript</title>
<script src="app.js"></script>
</head>
<body>
<h1>hi!</h1>
<p>
this is a <a href="">link</a>
</p>
</body>
</html>!로 기본 HTML 스켈레톤을 생성한 후 body에 간략하게 요소를 추가했다. 이제 자바스크립코드에서
console.dir(document)를 입력한다. console.dir는 console.log와는 다르게 문서에 저장된 진짜 객체를 출력해준다.
개발자도구에서 봐보면
자바스크립트로 해석된 HTML코드를 볼 수 있다. 수많은 객체와 메서드들이 존재한다. 이는 브라우저가 화면에 무엇을 어떻게 표시해야 하는지를 알려준다.
body-children 탭을 열어보면 body의 요소들을 전부 볼 수 있다.
또한 head 탭을 열면 HTML의 head태그에 영향을 주는 요소들이 전부 들어 있는 등 HTML코드가 javascript로 변환된 내용을 볼 수 있다. 이러한 정보들은 브라우저가 화면에 무엇을 어떻게 표시해야 하는지 파악하는 데에 쓰인다.
