XML DOM을 사용하면 노드 트리의 모든 노드에 액세스할 수 있습니다.
이때 노드에 접근하는 방법은 다음과 같습니다.
1. getElementsByTagName() 메서드 사용
2. 노드 트리를 지속적으로 탐색하여 액세스
3. 노드 간의 관계를 이용한 근사 방법
getElementsByTagName() 메서드를 사용하는 방법
getElementsByTagName() 메서드는 특정 태그 이름을 가진 모든 요소를 노드로 반환합니다. 리스트 형태로 반환하다.
따라서 이 메소드에서 반환되는 노드 목록을 이용하여 원하는 노드에 접근할 수 있습니다.
![[자료구조]2. 링크드 리스트 - 3](https://talk.anvios.com/wp-content/plugins/contextual-related-posts/default.png "[자료구조]2. 링크드 리스트 - 3")
getElementsByTagName() 메서드를 사용하기 위한 구문은 다음과 같습니다.
노드 이름.getElementsByTagName(“이름 링크”)
노드 트리를 순차적으로 탐색하여 액세스
노드 트리를 순차적으로 탐색하여 원하는 노드에 도달할 수도 있습니다.
|
하나
2
삼
4
5
6
7
8일
9
|
xmlObj = xmlHttp.responseXML; // 요청된 데이터를 XML DOM 객체로 반환합니다.
노드 목록 = xmlObj.xmlObj.문서 요소.childNodes; // XML 문서 노드의 자식 노드를 반환합니다.
결과 = “XML 문서 노드의 하위 요소 노드
“; ~을 위한(idx = 0; 아이디엑스 < 노드 목록.길이; 아이디엑스++) {
만약에(nodeList(idx).nodeType == 하나) { // 요소 노드만 출력합니다.
결과 += 노드목록(idx).노드이름 + “
“; }
}
문서.getElementById(“텍스트”).innerHTML = 결과;
|
CS |
노드 간 관계를 통한 접근
XML DOM의 노드 간 관계는 다음 속성으로 정의됩니다.
1. parentNode: 부모 노드
2. childNodes: 자식 노드 목록
3. firstChild: 첫 번째 자식 노드
4. lastChild: 마지막 자식 노드
5. nextSibling: 다음 형제 노드
6. previousSibling: 이전 형제 노드
위의 속성에서 원하는 노드에 쉽게 접근할 수 있습니다.
|
하나
2
삼
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 언어=“en”>
<머리>
<메타 차트=“UTF-8”>
<제목>XML 노드</제목>
<스크립트>
기능 loadDoc() {
바르 xmlHttp = 새로운 XMLHttpRequest();
xmlHttp.onreadystatechange = 기능() {
만약에(그만큼.상태 == 200 && 그만큼.readyState == 그만큼.완전한) {
searchNode(xmlHttp);
}
};
xmlHttp.open(“받다”, “/examples/media/programming_languages.xml”, 진실);
xmlHttp.send();
}
기능 searchNode(xmlHttp) {
바르 xmlObj, firstLang, 노드, 결과, idx;
xmlObj = xmlHttp.responseXML; // 요청된 데이터를 XML DOM 객체로 반환합니다.
모국어 = xmlObj.getElementsByTagName(“언어”)(0); // 첫 번째 반환
마디 = firstLanguage firstChild; // 첫 번째의 첫 번째 자식을 반환합니다.
결과 = “언어 요소의 하위 요소 노드
“; ~을 위한(idx = 0; 아이디엑스 < firstLang.childNodes.길이; 아이디엑스++) {
만약에(노드. 노드 유형 == 하나) { // 요소 노드만 출력합니다.
결과 += 노드.노드 이름 + “
“; }
마디 = node.nextSibling; // 현재 노드의 다음 형제를 반환합니다.
}
문서.getElementById(“텍스트”).innerHTML = 결과;
}
</스크립트>
</머리>
<몸>
<h1>노드 간 관계를 통한 접근</h1>
<단추 딸깍 하는 소리=“loadDoc()”>액세스 노드!</단추>
<pID=“텍스트”></피>
</몸>
</HTML>
|
CS |
빈 텍스트 노드 처리
대부분의 주요 웹 브라우저는 현재 W3C DOM 모델을 지원하지만 약간의 처리 차이가 있습니다.
가장 큰 차이점은 공백과 개행이 처리되는 방식입니다.
Firefox 및 기타 브라우저는 공백과 줄 바꿈을 텍스트 노드로 취급합니다.
그러나 Explorer는 공백이나 줄바꿈을 텍스트 노드로 취급하지 않습니다.
따라서 자식 노드나 형제 노드를 통해 원하는 노드에 접근하려고 하면 브라우저마다 차이가 발생한다.
이 차이를 제거하는 가장 쉬운 방법은 nodeType 속성을 사용하여 선택한 요소의 유형을 확인하는 것입니다.
다음 예제에서는 지정된 노드의 마지막 자식 요소 노드에 액세스합니다.
|
하나
2
삼
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 언어=“en”>
<머리>
<메타 차트=“UTF-8”>
<제목>XML 노드</제목>
<스크립트>
기능 loadDoc() {
바르 xmlHttp = 새로운 XMLHttpRequest();
xmlHttp.onreadystatechange = 기능() {
만약에(그만큼.상태 == 200 && 그만큼.readyState == 그만큼.완전한) {
findLastChild(xmlHttp);
}
};
xmlHttp.open(“받다”, “/examples/media/programming_languages.xml”, 진실);
xmlHttp.send();
}
기능 findLastChild(xmlHttp) {
바르 xmlObj, 문서노드, lastNode;
xmlObj = xmlHttp.responseXML; // 요청된 데이터를 XML DOM 객체로 반환합니다.
문서노드 = xmlObj.xmlObj.문서 요소; // XML 문서 노드를 반환합니다.
마지막 매듭 = documentNode.lastChild; // XML 문서 노드의 마지막 자식 노드를 반환합니다.
만약에(마지막 노드. 노드 유형 != 하나) { // 마지막 자식 노드가 요소 노드가 아닌 경우,
마지막 매듭 = lastNode.previoussibling; // 현재 마지막 노드 바로 앞의 노드를 반환합니다.
}
문서.getElementById(“텍스트”).innerHTML = “XML 문서 노드의 마지막 하위 요소 노드는 “ +
lastNode.childNodes(하나).firstChild.nodeValue + “보지.”;
}
</스크립트>
</머리>
<몸>
<h1>노드 간 관계를 통한 접근</h1>
<단추 딸깍 하는 소리=“loadDoc()”>액세스 노드!</단추>
<pID=“텍스트”></피>
</몸>
</HTML>
|
CS |