하얀 코딩

[DOM - 1] DOM 기초 본문

DOM

[DOM - 1] DOM 기초

whitecoding 2023. 1. 4. 01:49

[그림] HTML과 DOM의 구조 (트리 형태의 자료구조)

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작 할 수 있는 Model입니다. JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

HTML을 조작할 수 있다는 게 무슨 뜻일까요?

HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. (DOM)

DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다.

앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 소셜 미디어에서

새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다.

HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용합니다.

<script src="myScriptFile.js"></script>

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. 

HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다. 

<script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.

[ 그림 ] 웹 브라우저는 script 요소를 만나면 HTML 해석을 일시정지합니다.

그래서 <body> 요소가 끝나기 전에 스크립트 파일을 삽입 해주는게 이상적입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>

DOM 구조를 조회할 때에는 console.dir 이 유용합니다. 

console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력합니다.

[그림] about:blank (빈 페이지)에서 log 와 dir의 모습

 

'DOM' 카테고리의 다른 글

[DOM - 6] Element 추가 / 삭제  (0) 2023.12.12
[DOM - 5] querySelectorAll  (0) 2023.12.12
[DOM - 4] querySelector  (0) 2023.12.12
[DOM - 3] 단일 Element 선택  (0) 2023.12.12
[DOM - 2] 탐색 API  (0) 2023.12.12
'DOM' Related Articles more