XML DOM 노드 위치 찾기

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

예제

아래의 예제는 XML 파일을 사용합니다 books.xml。

함수 loadXMLDoc()외부 JavaScript에서 XML 파일을 로드하는 데 사용됩니다.

노드의 부모 노드를 가져오기
이 예제에서는 parentNode 속성을 사용하여 노드의 부모 노드를 가져옵니다。
노드의 첫 번째 자식 노드 가져오기
이 예제에서는 firstChild() 메서드와 커스텀 함수를 사용하여 노드의 첫 번째 자식 노드를 가져옵니다.

DOM 노드 탐색

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

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

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

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

DOM 노드 트리

DOM - 부모 노드

모든 노드는 단 하나의 부모 노드를 가집니다. 아래 코드는 <book>의 부모 노드를 정확히 위치합니다：

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

예제 설명:

  • 사용하여 loadXMLDoc() "books.xml" xmlDoc에 로드
  • 첫 번째 <book> 요소 가져오기
  • "x"의 부모 노드의 노드 이름 출력

TIY

빈 텍스트 노드 피하기

Firefox와 다른 몇 가지 브라우저는 빈 공백이나 줄 바꿈을 텍스트 노드로 간주하지만 IE는 이렇게 하지 않습니다。

이는 다음 속성을 사용할 때 문제가 발생합니다: firstChild, lastChild, nextSibling, previousSibling。

빈 텍스트 노드(요소 노드 사이의 공백과 줄 바꿈 기호)에 정확히 위치하기 위해 함수를 사용하여 노드 타입을 확인합니다：

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

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

코드 설명：

요소 노드의 타입은 1입니다. 동일 수준의 노드가 요소 노드가 아니면 다음 노드로 이동하여 요소 노드를 찾아까지 이동합니다. 이 방법으로 IE와 Firefox에서 동일한 결과를 얻을 수 있습니다.

첫 번째 요소 가져오기

아래 코드는 첫 번째 <book>의 첫 번째 요소 노드를 표시합니다：

<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
<script type="text/javascript">
// 첫 번째 노드가 요소 노드인지 확인합니다
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

출력:

title

예제 설명:

  • 사용하여 loadXMLDoc() "books.xml" xmlDoc에 로드
  • get_firstChild 함수를 사용하여 첫 번째 <book>에서 요소 노드의 첫 번째 자식 노드를 가져옵니다
  • 첫 번째 자식 노드(요소 노드)의 노드 이름을 출력합니다

TIY

예제

아래의 예제는 유사한 함수를 사용합니다:

  • firstChild: TIY
  • lastChild: TIY
  • nextSibling: TIY
  • previousSibling: TIY