Ajax 2 - DOM과 노드

DOM

---

 

---

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

문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스입니다.

이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

Ajax에서는 이러한 DOM을 이용하여 웹 페이지의 일부 요소만을 변경할 수 있습니다.

따라서 Ajax를 배우기 전에 DOM에 대한 기본적인 사항을 알아야만 합니다.

 

---

DOM 요소의 선택

자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다.

DOM 요소를 선택하는 방법은 다음과 같습니다.

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

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

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

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

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

 

---

DOM 요소의 내용 변경

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

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

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

 

---

 

 

노드

---

---

노드(node)

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

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

 

---

노드 트리(node tree)

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

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

 

---

 

노드 간의 관계

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

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

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

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

 

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

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

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

 

---

노드로의 접근

자바스크립트로 DOM 노드에 접근하는 방법은 다음과 같습니다.

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

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

 

---

노드에 대한 정보

DOM 노드에 대한 정보는 다음과 같은 속성을 통해 접근할 수 있습니다.

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

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

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

 

---

노드 리스트(node list)

노드 리스트는 getElementsByTagName() 메소드나 childNodes 속성의 속성값으로 반환되는 객체입니다.

이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있습니다.

 

---

 

DOM API

---

---

DOM API

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

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

 

---

노드의 추가

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

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

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

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

 

다음 예제는 appendChild() 메소드를 이용하여 노드를 추가하는 자바스크립트 예제입니다.

function appendNode() {
    var parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택함.
    var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
    parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가함.
}

 

---

노드의 생성

생성할 노드의 종류에 따라 다음과 같은 메소드를 사용할 수 있습니다.

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

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

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

다음 예제는 createElement() 메소드를 이용하여 노드를 생성하는 자바스크립트 예제입니다.

function createNode() {
    var criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택.
    var newNode = document.createElement("p");          // 새로운 <p> 요소를 생성.
    newNode.innerHTML = "새로운 단락입니다.";
    document.body.insertBefore(newNode, criteriaNode);  // 새로운 요소를 기준이 되는 요소 바로 앞에 추가.
}

 

---

노드의 제거

다음 메소드를 사용하면 특정 노드를 제거할 수 있습니다.

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

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

 

다음 예제는 removeChild() 메소드를 이용하여 노드를 제거하는 자바스크립트 예제입니다.

var parent = document.getElementById("list");      // 아이디가 "list"인 요소를 선택함.
var removedItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
parent.removeChild(removedItem);                   // 지정된 요소를 삭제함.

 

---

노드의 복제

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

다음 예제는 clondNode() 메소드를 이용하여 노드를 복제하는 자바스크립트 예제입니다.

function cloneElement() {
    var parent = document.getElementById("list");     // 아이디가 "list"인 요소를 선택함.
    var originItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
    parent.appendChild(originItem.cloneNode(true));   // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.
}

 

---

노드의 값 변경

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

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

 

다음 예제는 nodeValue 프로퍼티를 이용하여 노드를 생성하는 자바스크립트 예제입니다.

var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.
function changeText() {
    para.firstChild.nodeValue = "텍스트 변경 완료!";
}

 

---

노드의 교체

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

 

다음 예제는 replaceChild() 메소드를 이용하여 노드를 교체하는 자바스크립트 예제입니다.

var parent = document.getElementById("parent"); // 부모 노드를 선택함.
var first = document.getElementById("first");
var third = document.getElementById("third");
function changeNode() {
    parent.replaceChild(third, first);          // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
}

 

---