XML DOM을 이용하면 노드 트리에 포함된 모든 노드에 접근할 수 있습니다.
이때 노드에 접근하는 방법에는 다음과 같은 방법들이 있습니다.
1. getElementsByTagName() 메소드를 이용하는 방법
2. 노드 트리를 연속적으로 탐색하여 접근하는 방법
3. 노드 간의 관계를 이용하여 접근하는 방법
getElementsByTagName() 메소드를 이용하는 방법
getElementsByTagName() 메소드는 특정 태그 이름을 가지는 모든 요소를 노드 리스트의 형태로 반환합니다.
따라서 이 메소드가 반환하는 노드 리스트를 이용하면 원하는 노드에 접근할 수 있습니다.
getElementsByTagName() 메소드를 사용하는 문법은 다음과 같습니다.
노드이름.getElementsByTagName("태그이름")
노드 트리를 연속적으로 탐색하여 접근하는 방법
노드 트리 전체를 연속적으로 탐색하여 원하는 노드에 접근할 수도 있습니다.
|
1
2
3
4
5
6
7
8
9
|
xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
nodeList = xmlObj.documentElement.childNodes; // XML 문서 노드의 자식 노드를 반환함.
result = "XML 문서 노드의 자식 요소 노드<br>";
for(idx = 0; idx < nodeList.length; idx++) {
if(nodeList[idx].nodeType == 1) { // 요소 노드만을 출력함.
result += nodeList[idx].nodeName + "<br>";
}
}
document.getElementById("text").innerHTML = result;
|
cs |
노드 간의 관계를 이용하여 접근하는 방법
XML DOM에서 노드 간의 관계는 다음과 같은 속성들로 정의됩니다.
1. parentNode : 부모 노드
2. childNodes : 자식 노드 리스트
3. firstChild : 첫 번째 자식 노드
4. lastChild : 마지막 자식 노드
5. nextSibling : 다음 형제 노드
6. previousSibling : 이전 형제 노드
위와 같은 속성들을 이용하여 원하는 노드에 손쉽게 접근할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XML Node</title>
<script>
function loadDoc() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(this.status == 200 && this.readyState == this.DONE) {
searchNode(xmlHttp);
}
};
xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
xmlHttp.send();
}
function searchNode(xmlHttp) {
var xmlObj, firstLang, node, result, idx;
xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
firstLang = xmlObj.getElementsByTagName("language")[0]; // 첫 번째 <language>요소를 반환함.
node = firstLang.firstChild; // 첫 번째 <language>요소의 첫 번째 자식 노드를 반환함.
result = "language 요소의 자식 요소 노드<br>";
for(idx = 0; idx < firstLang.childNodes.length; idx++) {
if(node.nodeType == 1) { // 요소 노드만을 출력함.
result += node.nodeName + "<br>";
}
node = node.nextSibling; // 현재 노드의 바로 다음 형제 노드를 반환함.
}
document.getElementById("text").innerHTML = result;
}
</script>
</head>
<body>
<h1>노드 간의 관계를 이용하여 접근하는 방법</h1>
<button onclick="loadDoc()">노드 접근하기!</button>
<p id="text"></p>
</body>
</html>
|
cs |
빈 텍스트 노드의 처리
현재 대부분의 주요 웹 브라우저는 모두 W3C DOM 모델을 지원하지만, 그 처리 방식에 있어 약간씩의 차이가 있습니다.
그중에서도 가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식입니다.
파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)로 취급합니다.
하지만 익스플로러는 띄어쓰기나 줄 바꿈을 텍스트 노드로 취급하지 않습니다.
따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 하면 브라우저 간에 차이가 발생하게 됩니다.
이 차이를 없애는 가장 손쉬운 방법은 nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하는 것입니다.
다음 예제는 특정 노드의 맨 마지막 자식 요소 노드에 접근하는 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>XML Node</title>
<script>
function loadDoc() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(this.status == 200 && this.readyState == this.DONE) {
findLastChild(xmlHttp);
}
};
xmlHttp.open("GET", "/examples/media/programming_languages.xml", true);
xmlHttp.send();
}
function findLastChild(xmlHttp) {
var xmlObj, documentNode, lastNode;
xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
documentNode = xmlObj.documentElement; // XML 문서 노드를 반환함.
lastNode = documentNode.lastChild; // XML 문서 노드의 마지막 자식 노드를 반환함.
if(lastNode.nodeType != 1) { // 마지막 자식 노드가 요소 노드가 아니면,
lastNode = lastNode.previousSibling; // 현재 마지막 노드의 바로 앞 노드를 반환함.
}
document.getElementById("text").innerHTML = "XML 문서 노드의 맨 마지막 자식 요소 노드는 " +
lastNode.childNodes[1].firstChild.nodeValue + "입니다.";
}
</script>
</head>
<body>
<h1>노드 간의 관계를 이용하여 접근하는 방법</h1>
<button onclick="loadDoc()">노드 접근하기!</button>
<p id="text"></p>
</body>
</html>
|
cs |
'IT기술 > xml' 카테고리의 다른 글
| XML 노드의 정보 (0) | 2023.03.08 |
|---|---|
| XML 노드 리스트 (0) | 2023.03.08 |
| 노드(node), xml에서 노드란? (0) | 2023.03.07 |
| XML 파서(parser) (0) | 2023.03.07 |
| XMLHttpRequest 객체 (0) | 2023.03.07 |
