6월1일(화) DOM(Document Object Model)

남이섬·2021년 6월 1일

TIL

DOM(Document Object Model)

MDN 정의
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다.
(이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.)

HTML에 자바스크립트 적용하기

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

ex)
<script src="파일이름.js"></script>
웹 브라우저는 script 요소를 만나면 HTML 해석을 일시정지 한다.

script 태그를 추가하는 두 가지 대표적인 사례가 있다.

1. head 태그 안쪽에 삽입하는 경우

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <script src="파일이름.js"></script>
</head>
<body>
  <div id="msg">Hello JavaScript!</div>
</body>
</html>
head에 추가하였을 경우, HTML parsing을 하다가 멈추고 JS를 fetching 및 실행한 후,
HTML parsing을 재개한다.

장점 : HTML parsing 중 script태그를 만나면 파싱이 멈추고 js파일을 먼저 다운받아 웹사이트가 완벽한 형태로 보여진다.
단점 : js파일의 사이즈가 크고 인터넷이 느릴 경우, 사용자가 웹사이트를 보는 데까지
많은 시간이 소요된다.

2. 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>

HTML이 parsing을 끝낸 다음. js를 fetching 후, 실행.

장점 : HTML의 pasing을 모두 끝낸 다음에 js파일을 다운받기 때문에 기본적인 HTML의 컨텐츠를 빠르게 확인 가능하다.
단점 : 웹사이트가 js에 대한 의존도가 높은 경우, 사용자가 정상적인 콘텐츠를 확인하기 위해서는 js를 서버에서 받아오고 실행하기까지 기다려야 한다.

연습

HTML 트리구조 중 자식 엘리먼트 찾기, 부모 엘리먼트 찾기
수도코드 작성 연습

수도코드 작성 연습

남이섬

즐겁게 살자

이전 포스트

스코프와 클로져

다음 포스트