13. JS의 DOM_개요

DOM(Document Object Model : 문서 객체 모델)

- 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득 찬 라이브러리.

- DOM은 웹 페이지가 HTML 페이지를 인식하는 방식을 말함.

- 웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API.

- DOM에서 제공하는 일반적인 기능이 여러 개의 DOM 객체로 나뉘어 구성되어 있음.

- DOM은 정의부분(명세서)과 구현부분으로 나뉘어 있음.

- 명세서에는 웹 페이지 문서를 조작할 떄 지켜야 할 약속(규칙, 규약)이 명시되어 있고 코드는 존재하지 않음.

- 명세서는 웹 표준을 정의하는 W3C 관할. 구현 부분은 브라우저 내부에 존재함.

- 브라우저 제작사는 DOM에 명시되어 있는 인터페이스에 맞춰서 자신들만의 특화된 고유 기술을 이용해 독자적으로 기능을 구현함.

- DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 요소를 나타냄.

- 자바스크립트 코드에서는 동적 HTML을 만들어내기 위해 DOM 객체에 접근하여 조작할 수 있음.

 

문서 객체

1. 노드

- HTML 웹 페이지 구성 요소의 가장 작은 단위.

- 문서를 이루는 모든 요소를 통합해서 부르는 용어.

- 즉, HTML 페이지의 각 태그들, 주석들 모두 노드.

- 브라우저는 이런 노드로 가득 찬 웹 페이지를 읽어들여 해석한 후, 각 노드에 접근해 제어할 수 있는 DOM 객체를 생성함.

 

2. 요소

- <시작태그> 텍스트 </끝태그>

 

3. 텍스트노드

- 요소 안에 있는 글자. innerHTML과 관계있음.

- 노드, 스타일, 속성, 이벤트, 위치 및 크기들을 다룰 수 있는 다양한 기능 포함.

- DOM 객체가 생성되는 순서를 자세히 살펴보면, 웹 브라우저는 가장 먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성함. 이후 생성되는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들 어짐.

- 보통 DOM방식은 트리구조. 브라우저가 웹 페이지를 처리하는 과정을 보면, 먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하기 위해  HTML웹 페이지를 읽은 후 '파싱' 단계를 거침. 이후 DOM 객체로 변환한 후(트리구조) 화면에 출력함.

- 예를 들어 웹 페이지에 <img src="test.jpg>라는 노드가 있다면, 브라우저에 의해 HTMLImageElement라는 DOM 객체가 생성됨. 이 객체는 다른 DOM 객체와는 다르게 이미지를 읽어 들이는 특별한 기능이 있어서 실행 시에 "test.jpg"라는 외부 이미지 파일을 읽어들이게 됨. 즉, 문서 상의 노드는 브라우저에게 노드를 보고 알맞은 DOM을 생성하라고 알려주는 것임. 이에 따라 브라우저가 DOM 객체를 만들어 작업이 처리되게 함.

 

브라우저가 웹 페이지를 처리하는 과정

1. 웹 페이지 읽기

- 먼저 브라우저는 HTML 페이지를 읽음.

2. 파싱 단계

- 이어서(parsing)단계를 거쳐서 웹 페이지 내용을 해석하게 됨.

- 이 때 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스 객체를 생성하게 됨.

- 이렇게 생성된 객체는 저마다 고유한 기능을 하게 됨.

3. 출력

- 마지막으로 웹 브라우저는 생성한 DOM 객체를 가지고 우리가 보고 있는 웹 페이지 화면을 만들게 됨.

 

DOM을 공부하면서 알아야 할 내용
1. 노드 다루기
- 문서에서 특정 태그 이름을 지닌 노드 찾기
- 특정 노드의 자식 노드에서 특정 태그 이름을 지닌 노드 찾기
- 문서에서 특정 클래스가 적용된 노드 찾기
- 문서에서 특정 id를 가진 노드 찾기

- 자식 노드 찾기
- 부모 노드 찾기
- 형제 노드 찾기

- document.createElement() 메서드를 사용해서 노드 생성 및 추가하기
- HTMLElement.innerHTML 프로퍼티를 사용해서 노드 생성 및 추가하기
- Node.cloneNode() 메서드를 사용해서 노드 생성 및 추가하기
- 노드 삭제하기
- 노드 이동시키기

- 텍스트노드 생성 및 추가하기
- 텍스트노드 내용 변경하기

2. 스타일 다루기
- 스타일 속성값 구하기
- 스타일 속성값 설정하기
- 스타일 속성 제거하기

3. 속성 다루기
- 속성값 구하기
- 속성값 설정하기
- 속성값 제거하기

3. 이벤트 다루기
- 이벤트 리스너 추가하기
- 이벤트 리스너 삭제하기
- 이벤트 발생시키기
- 사용자 정의 이벤트 만들기