문서 객체 모델(DOM)
DOM(Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스
DOM을 이용하여 웹 페이지의 일부 요소만을 변경 가능
DOM 요소의 선택
자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야함
* DOM 요소를 선택하는 방법
1. 태그 이름(tag name)을 이용한 선택
2. 아이디(id)를 이용한 선택
3. 클래스(class)를 이용한 선택
4. CSS 선택자(selector)를 이용한 선택
5. HTML 객체 집합(object collection)을 이용한 선택
DOM 요소의 내용 변경
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
Ajax를 이용하여 웹 페이지의 일부만을 갱신하기위해서는 더욱 다양한 DOM 속성을 활용해야하며,
DOM과 관련된 다양한 API를 이용하여 노드를 동적으로 생성하고, 조작 가능해야한다.
노드의 추가
다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가
1. appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트에 맨 마지막 노드로 추가
2. insertBefore() : 새로운 노드를 특정 노드 바로 앞에 추가
3. insertData() : 텍스트 노드의 텍스트 데이터에 새로운 텍스트를
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Manage</title>
</head>
<body>
<h1>appendChild() 메소드</h1>
<h2 id="item">JavaScript</h2>
<div id="list">
<p>HTML</p>
<p>CSS</p>
<p>JQuery</p>
</div>
<button onclick="appendNode()">노드 추가!</button>
<script>
function appendNode() {
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택함.
var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
parent.appendChild(newItem); // 해당 요소의 맨 마지막 자식 노드로 추가함.
}
</script>
</body>
</html>
노드의 생성
생성할 노드의 종류에 따라 다음과 같은 메소드를 사용 가능
1. createElement() : 새로운 요소 노드를 생성
2. createAttribute() : 새로운 속성 노드를 생성
3. createTextNode() : 새로운 텍스트 노드를 생성
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Manage</title>
</head>
<body>
<h1>요소 노드의 생성</h1>
<p id="text">새로운 단락을 생성하여 이 단락 앞에 추가할 것입니다.</p>
<button onclick="createNode()">요소 노드 생성!</button>
<script>
function createNode() {
var criteriaNode = document.getElementById("text"); // 기준이 되는 요소로 아이디가 "text"인 요소를 선택함.
var newNode = document.createElement("p"); // 새로운 <p> 요소를 생성함.
newNode.innerHTML = "새로운 단락입니다.";
document.body.insertBefore(newNode, criteriaNode); // 새로운 요소를 기준이 되는 요소 바로 앞에 추가함.
}
</script>
</body>
</html>
노드의 제거
다음 메소드를 사용하면 특정 노드를 제거할 수 있습니다.
1. removeChild() : 기존의 노드 리스트에서 특정 노드를 제거
2. removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Manage</title>
</head>
<body>
<h1>removeChild() 메소드</h1>
<button onclick="remove()">요소 노드 삭제!</button>
<div id="list">
<p>HTML</p>
<p id="item">CSS</p>
<p>JavaScript</p>
</div>
<script>
function remove() {
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택함.
var removedItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
parent.removeChild(removedItem); // 지정된 요소를 삭제함.
}
</script>
</body>
</html>
노드의 복제
cloneNode() 메소드를 사용하면 특정 노드를 복제
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Manage</title>
</head>
<body>
<h1>cloneNode() 메소드</h1>
<button onclick="cloneElement()">노드 복제!</button>
<h2 id="item">JavaScript</h2>
<div id="list">
<p>HTML</p>
<p>CSS</p>
<p>JQuery</p>
</div>
<script>
function cloneElement() {
var parent = document.getElementById("list"); // 아이디가 "list"인 요소를 선택함.
var originItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
parent.appendChild(originItem.cloneNode(true)); // 해당 노드를 복제하여 리스트의 맨 마지막에 추가함.
}
</script>
</body>
</html>
노드의 값 변경
nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경 가능
setAttribute() 메소드는 속성 노드의 속성값을 변경 가능
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Handle</title>
</head>
<body>
<h1>텍스트 노드의 값 변경</h1>
<p id="text">이 텍스트를 변경하고 싶어요!</p>
<button onclick="changeText()">텍스트 변경!</button>
<script>
var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함.
function changeText() {
para.firstChild.nodeValue = "텍스트 변경 완료!";
}
</script>
</body>
</html>
노드의 교체
replaceChild() 메소드를 사용하면 특정 노드 그 자체를 다른 노드로 바꿀 수 있음
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript Node Handle</title>
</head>
<body>
<h1>요소 노드의 교체</h1>
<div id="parent">
<p id="first">첫 번째 요소입니다.</p>
<p>두 번째 요소입니다.</p>
</div>
<p id="third">세 번째 요소입니다.</p>
<button onclick="changeNode()">요소 노드 교체!</button>
<script>
var parent = document.getElementById("parent"); // 부모 노드를 선택함.
var first = document.getElementById("first");
var third = document.getElementById("third");
function changeNode() {
parent.replaceChild(third, first); // first 요소를 삭제하고, 그 대신 third 요소를 삽입함.
}
</script>
</body>
</html>
사진: Unsplash의Roberto Nickson
'Ajax' 카테고리의 다른 글
| 서버로부터의 응답(response) 확인[AJAX개발] (0) | 2023.11.03 |
|---|---|
| 서버에 요청(request)하기[AJAX개발] (0) | 2023.11.03 |
| AJAX-XMLHttpRequest 객체[AJAX개발] (0) | 2023.11.02 |
| Ajax 란? (0) | 2023.11.02 |
