XML DOM - 노드 탐색
노드는 노드 관계를 사용하여 탐색할 수 있습니다.
DOM 노드 탐색
노드 간의 관계를 통해 노드 트리의 노드에 액세스하는 것을 종종 "노드 탐색"이라고 합니다.
XML DOM에서 노드 관계는 노드에 대한 속성으로 정의됩니다.
- 부모 노드
- 자식 노드
- 첫 번째 차일드
- 막내
- 다음자매
- 이전 형제자매
다음 이미지는 노드 트리의 일부와 books.xml 에 있는 노드 간의 관계를 보여줍니다 .
DOM - 부모 노드
모든 노드에는 정확히 하나의 상위 노드가 있습니다. 다음 코드는 <book>의 상위 노드로 이동합니다.
예시
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("book")[0];
document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}
설명된 예:
- xmlDoc에 " books.xml " 로드
- 첫 번째 <book> 요소 가져오기
- "x"의 부모 노드의 노드 이름을 출력합니다.
빈 텍스트 노드 피하기
Firefox 및 일부 다른 브라우저는 빈 공백이나 새 줄을 텍스트 노드로 처리하지만 Internet Explorer는 처리하지 않습니다.
이것은 속성을 사용할 때 문제를 일으킵니다: firstChild, lastChild, nextSibling, previousSibling.
빈 텍스트 노드(요소 노드 사이의 공백 및 개행 문자)로 이동하는 것을 방지하기 위해 노드 유형을 확인하는 함수를 사용합니다.
function get_nextSibling(n)
{
var y = n.nextSibling;
while (y.nodeType! = 1)
{
y = y.nextSibling;
}
return y;
}
위의 함수를 사용 하면 속성 노드 .nextSibling 대신 get_nextSibling( node )을 사용할 수 있습니다.
코드 설명:
요소 노드는 유형 1입니다. 형제 노드가 요소 노드가 아닌 경우 요소 노드를 찾을 때까지 다음 노드로 이동합니다. 이렇게 하면 Internet Explorer와 Firefox 모두에서 결과가 동일합니다.
첫 번째 자식 요소 가져오기
다음 코드는 첫 번째 <book>의 첫 번째 요소 노드를 표시합니다.
예시
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET",
"books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.getElementById("demo").innerHTML = x.nodeName;
}
//check if
the first node is an element node
function get_firstChild(n) {
var y = n.firstChild;
while (y.nodeType != 1) {
y = y.nextSibling;
}
return y;
}
</script>
</body>
</html>
산출:
title
설명된 예:
- xmlDoc에 " books.xml " 로드
- 첫 번째 <book> 요소 노드에서 get_firstChild 함수를 사용하여 요소 노드인 첫 번째 자식 노드를 가져옵니다.
- 요소 노드인 첫 번째 자식 노드의 노드 이름 출력
더 많은 예
이 예제에서는 lastChild() 메서드와 사용자 지정 함수를 사용하여 노드의 마지막 자식 노드를 가져옵니다.
이 예제는 nextSibling() 메서드와 사용자 정의 함수를 사용하여 노드의 다음 형제 노드를 가져옵니다.
이 예제에서는 previousSibling() 메서드와 사용자 지정 함수를 사용하여 노드의 이전 형제 노드를 가져옵니다.