최신 웹 개발 튜토리얼
 

XML DOM - 탐색 노드

❮ 이전 다음 장 ❯

노드는 노드의 관계를 이용하여 탐색 될 수있다.

×

머리글

DOM 노드 탐색

노드들 사이의 관계를 통해 상기 노드 트리의 노드에 액세스 종종 불린다 "navigating nodes" .

는 XML DOM에서 노드 관계는 노드에 속성으로 정의된다 :

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

다음 그림 노드 트리의 노드들 사이의 관계를 도시 한 부분 에서는 Books.xml :

노드 트리

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"

빈 텍스트 노드를 피하십시오

파이어 폭스와 다른 브라우저, 텍스트 노드로 빈 흰색 공간 또는 새로운 라인을 취급, Internet Explorer가되지 않습니다.

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 (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
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
»그것을 자신을 시도

예 설명 :

  1. 로드 " Books.xml을 해당 xmldoc에"
  2. 처음에 get_firstChild 기능을 사용하여 <book> 요소 노드가 첫 번째 자식 노드를 얻기 위해 요소 노드
  3. 요소 노드는 출력 첫번째 자 노드의 노드 이름
예

더 예

lastChild()
이 예에서는 사용 lastChild() 노드의 마지막 자식 노드를 얻는 방법 및 사용자 정의 기능을

nextSibling()
이 예는 사용 nextSibling() 노드의 다음 형제 노드를 얻는 방법 및 사용자 정의 기능을

previousSibling()
이 예에서는 사용 previousSibling() 노드의 이전 형제 노드를 얻는 방법 및 사용자 정의 기능을


❮ 이전 다음 장 ❯