자바스크립트 DOM

DOM(Document Object Model)

: 문서 객체 모델. 구조화된 문서를 표현하는 형식

- XML이나 HTML 문서의 프로그래밍 인터페이스

- DOM은 문서의 구조화된 표현을 제공함. 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 함.

 

HTML DOM : HTML 문서를 조작하고 접근하는 표준화된 방법

DOM의 트리 구조 (노드트리)

 

노드 : HTML DOM에서 정보를 저장하는 계층적 단위

노드 트리 : 노드들의 집합

- 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음. (부모, 형제, 자식 등)

 

자바스크립트에서는 HTML DOM을 이용해서 노드 트리에 포함된 모든 노드에 접근 가능.

 

노드의 종류

1. 문서 노드 : HTML 문서 전체를 나타내는 노드

2. 요소 노드 : 모든 HTML 요소는 요소 노드, 속성 노드를 가질 수 있는 유일한 노드

3. 주석 노드 : HTML 문서의 모든 주석은 주석 노드

4. 속성 노드 : 모든 HTML 요소의 속성은 속성 노드, 요소 노드에 관한 정보를 가짐. 

- 해당 요소 노드의 자식 노드에는 포함되지 않음.

5. 텍스트 노드 : HTML 문서의 모든 텍스트는 텍스트 노드

 

---

document 메서드 활용

- 자바스크립트에서 DOM을 이용하여 HTML 요소를 선택 및 노드에 접근

Document 객체 : 웹 페이지를 의미

-> 웹 페이지에 존재하는 HTML 요소에 접근할 때는 Document 객체부터 시작해야함.

 

 

 

예시

var links = document.querySelectorAll(".tabs-list li a")

var items = document.querySelectorAll(".tabs-list li")

 

 

 

 

- innerHTML : 트리구조로 비유하면, text 아래에 있는 것

 

 

노드에 접근

 

- nodeName, nodeValue, nodeType

 

nodeValue

아래 코드 실행 시, apple -> apple_pie로 바뀜

var apple_node = document.getElementById('apple');

apple_node.firstChild.nodeValue = 'apple_pie' ;

nodeValue 예시

 

nodeType

- nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현

 

---

이벤트

- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생

- 종류 : 폼, 키보드, 마우스, HTML DOM, Window 객체 등

- 이벤트 핸들러 : 이벤트가 발생했을 때 그 처리를 담당하는 함수.

지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러 실행

 

마우스 클릭 이벤트 예시

- this -> p객체에서 나온 dom 객체, 자기 자신