XML DOM 노드 위치

노드 간의 관계를 사용하여 노드를 위치시킬 수 있습니다.

DOM 노드 위치

노드 관계를 통해 노드 트리의 노드에 접근하는 것을 일반적으로 "노드 위치"(또는 노드 탐색, navigating nodes)라고 합니다.

XML DOM에서 노드 관계는 노드의 속성으로 정의됩니다：

  • parentNode
  • childNodes
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

아래 그림은 다음을 보여줍니다： books.xml 중 노드 트리의 일부를 설명하고 노드 간의 관계를 설명합니다：

DOM 노드 트리

DOM - 부모 노드

모든 노드는 하나의 부모 노드를 가집니다. 아래 코드는 <book>의 부모 노드로 이동합니다：

实例

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("book")[0];
    document.getElementById("demo").innerHTML = x.parentNode.nodeName;
}

亲自试一试

例子解释：

  1. 을(를) 사용하여 books.xml 로 로드됩니다 xmlDoc 중
  2. 첫 번째 <book> 요소를 가져옵니다
  3. "x"의 부모 노드의 노드 이름을 출력

빈 텍스트 노드 피하기

일부 브라우저는 공백이나 줄 바꿈 문자를 텍스트 노드로 간주할 수 있습니다. 이는 다음 속성을 사용할 때 문제가 발생할 수 있습니다：

  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

빈 텍스트 노드(요소 노드 사이의 공백과 줄 바꿈 문자)로 이동하지 않기 위해 함수를 사용하여 노드의 유형을 확인합니다：

function get_nextSibling(n) {}}
    var y = n.nextSibling;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}

위 함수를 사용하여 get_nextSibling(node)를 node.nextSibling 속성 대신 사용할 수 있습니다.

코드 설명：

요소 노드의 타입은 1입니다. 동일 수준의 노드가 요소 노드가 아니면 다음 노드로 이동하여 요소 노드를 찾습니다.

첫 번째 자식 요소를 가져옵니다

아래 코드는 첫 번째 <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;
}
// 첫 번째 노드가 요소 노드인지 확인합니다
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType != 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</body>
</html>

亲自试一试

例子解释：

  1. 을(를) 사용하여 books.xml xmlDoc에 로드됩니다
  2. get_firstChild 함수를 사용하여 첫 번째 자식 요소 노드를 가져오기 위해 첫 번째 <book> 요소 노드에서
  3. 첫 번째 자식 요소 노드의 노드 이름을 출력합니다

更多实例

lastChild()
lastChild() 메서드와自定义 함수를 사용하여 노드의 마지막 자식 노드를 가져옵니다.
nextSibling()
nextSibling() 메서드와 정의된 사용자 함수를 사용하여 노드의 다음 형제 노드를 가져오기 위해 사용됩니다.
previousSibling()
previousSibling() 메서드와 정의된 사용자 함수를 사용하여 노드의 이전 형제 노드를 가져오기 위해 사용됩니다.