[TCP스쿨 - AJAX] 2. Ajax 기본

4) DOM

 

* 문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스이다. 이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

 

* DOM 요소의 선택

자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 한다. DOM 요소를 선택하는 방법은 다음과 같다.

1. 태그 이름(tag name)을 이용한 선택

2. 아이디(id)를 이용한 선택

3. 클래스(class)를 이용한 선택

4. CSS 선택자(selector)를 이용한 선택

5. HTML 객체 집합(object collection)을 이용한 선택

 

* DOM 요소의 내용 변경

- DOM을 이용하면 DOM 요소의 내용(content)이나 속성값 등을 손쉽게 변경할 수 있다.

- DOM 요소의 내용을 바꾸는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것이다.

- 또한, DOM 요소의 속성 이름을 이용하면 속성값을 바로 변경할 수도 있다.

 

 

5) 노드

 

* 노드(node)

- DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.

- DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해 주는 역할을 한다.

 

* 노드 트리(node tree)

- 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.

- 이러한 노드 트리는 노드들의 집합으로, 노드 간의 관계를 보여준다.

 

* 노드 간의 관계

- 노드 트리의 모든 노드들은 서로 계층적 관계를 가지고 있다.

- 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재한다.

- 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가진다.

- 모든 요소 노드는 자식 노드(child node)를 가질 수 있다.

- 형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킨다.

- 조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킨다.

- 자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킨다.

 

* 노드로의 접근

1. getElementsByTagName() 메소드를 이용하는 방법

2. 노드 간의 관계를 이용하여 접근하는 방법

 

* 노드에 대한 정보

1. nodeName : 노드 고유의 이름을 명시함.

2. nodeValue : 노드의 값을 명시함.

3. nodeType : 노드 고유의 타입을 명시함.

 

* 노드 리스트(node list)

노드 리스트는 getElementsByTagName() 메소드나 childNodes 속성의 속성값으로 반환되는 객체이다. 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다.

 

 

6) DOM API

 

* DOM API

- Ajax를 이용하여 웹 페이지의 일부분만을 갱신하려면 더욱 다양한 DOM 속성을 활용해야 한다.

- 따라서 DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성하고, 조작할 수 있어야만 한다.

 

* 노드의 추가

다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다.

1. appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트에 맨 마지막 노드로 추가함.

2. insertBefore() : 새로운 노드를 특정 노드 바로 앞에 추가함.

3. insertData() : 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가함.

 

* 노드의 생성

1. createElement() : 새로운 요소 노드를 생성함.

2. createAttribute() : 새로운 속성 노드를 생성함.

3. createTextNode() : 새로운 텍스트 노드를 생성함

 

* 노드의 제거

1. removeChild() : 기존의 노드 리스트에서 특정 노드를 제거함.

2. removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거함.

 

* 노드의 복제

cloneNode() 메소드를 사용하면 특정 노드를 복제할 수 있다.

 

 * 노드의 값 변경

- nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다.

- 또한, setAttribute() 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다.

 

* 노드의 교체

- replaceChild() 메소드를 사용하면 특정 노드 그 자체를 다른 노드로 바꿀 수 있다.