Chapter 1. DOM
학습 목표
- DOM의 개념을 이해한다.
- DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
- HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.
심화 학습 목표
- DOM과 JavaScript의 차이에 대해 이해할 수 있다.
1-1. HTML에 JavaScript 적용하기
- HTML에 JavaScript를 적용하기 위해서는
<script>태그를 이용
<script src="myScriptFile.js"></script>-
HTML 파일과 같은 디렉토리에 존재하는
myScriptFile.js을 불러옴 -
웹 브라우저가 작성된 코드를 해석하는 과정에서
<script>요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춤 -
HTML 해석을 잠시 멈춘 웹 브라우저는
<script>요소를 먼저 실행 -
<script>요소는 **등장과 함께 실행
-
<script>요소를 추가하는 두 가지 방법<head>안쪽에 삽입<body>요소가 끝나기 전 삽입
- 두 방식 모두
myScriptFile.js내의 첫 번째 console.log를 성공적으로 출력하지만, 두 번째 console.log의 경우 제대로 출력하지 못하는 예시
console.log('welcome JavaScript'); let msgElement = document.querySelector('#msg'); console.log(msgElement);
Q. 질문
- 각 방법은 콘솔 출력이 어떻게 다른가?
- 1번 방법에서는 null 이 콘솔에 출력되는 이유가 무엇일까요?
A. <head> 태그 사이에 사용할 때는, html이 로드되기 전에 JavaScript가 실행되기 때문
JavaScript 코드가 HTML을 파싱하여, dom 노드를 구축하기 전에 id값인 msg 엘리먼트를 찾고 있기 때문
- HTML 요소를 이용하려면 1번과 2번 중 어떤 방법을 사용해야 할까요?
A. 웹 브라우저의 동작 원리를 이해하면, <body>태그 하단에 위치시키는 것이 좋음
1-2. DOM
DOM
-
DOM은 문서 객체 모델(The Document Object Model)이라고 하며, HTML/XML 문서의 프로그래밍 interface
-
웹 페이지의 콘텐츠 및 구조, 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
-
JavaScript와 같은 언어가 쉽게 웹 페이지에 접근하려 조작할 수 있게끔 연결시켜주는 역할
-
브라우저는 HTML 문서를 로드한 후에 해당 문서에 대한 모델을 메모리에 생성하는데, 이때 모델은 객체의 트리로 구성됨 : DOM tree
DOM tree
- 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델
- 객체의 트리로 구조화되어 있음
(poiemaweb DOM tree) - DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식
- 문서 노드(Document Node)
- 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통함
- DOM tree에 접근하기 위한 시작점(entry point)
- 요소 노드(Element Node)
- 요소 노드는 HTML 요소를 표현
- HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화
- 문서의 구조를 서술
- 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근
- 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성
- 어트리뷰트 노드(Attribute Node)
- 어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현
- 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현
- 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있음
- 텍스트 노드(Text Node)
- 텍스트 노드는 HTML 요소의 텍스트를 표현
- 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없음
- 텍스트 노드는 DOM tree의 최종단
- 크롬 브라우저에서 확인하려면 개발자도구의 Elements 선택 후 오른쪽 properties 선택
감성있는 개발자를 꿈꿔요