Using XPath

XPath은 XML 문서의 위치 정보를 위한 언어입니다.

이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) DOM Level 3 XPath에 설명되어 있습니다.

이 문서는 XPath 자체를 설명하지 않습니다. 기술에 대해 익숙하지 않다면 W3Schools XPath tutorial을 참고하십시오.

Wrapper function

다음의 함수는 주어진 XML 노드의 XPath 표현을 평가하는데 사용할 수 있습니다. 첫 번째 전달인자는 DOM 노드 혹은 Document 객체이고, 두 번째 전달인자는 XPath 표현에 대한 문자열 정의입니다.

// Evaluate an XPath expression aExpression against a given DOM node
// or Document object (aNode), returning the results as an array
// thanks wanderingstan at morethanwarm dot mail dot com for the
// initial work.
function evaluateXPath(aNode, aExpr) {
  var xpe = new XPathEvaluator();
  var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
    aNode.documentElement : aNode.ownerDocument.documentElement);
  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
  var found = [];
  var res;
  while (res = result.iterateNext())
    found.push(res);
  return found;
}

이 함수는 new XPathEvaluator()와 같이 사용할 수 있습니다. 이것의 생성자는 Mozilla에 정의되어 있습니다. 다른 브라우저에서 사용될 웹페이지에서 이 스크립트가 사용된다면 다음과 같이 new XPathEvaluator()를 호출하면 됩니다:

  // XPathEvaluator is implemented on objects that implement Document
  var xpe = aNode.ownerDocument || aNode;

이 예에서 XPathNSResolver를 생성하는 것은 다음과 같이 간략화할 수 있습니다:

  var nsResolver = xpe.createNSResolver(xpe.documentElement);

그러나 createNSResolver는 XPath 표현에 대한 네임스페이스가 정해져 있고, 그러한 것들이 쿼리를 보낼 문서의 내용과 일치하여야 합니다. 그렇지 않다면 당신 자신만의 XPathNSResolver를 수행하는 부분을 만들어야 합니다.

(Parsing and serializing XML에서 설명하는 것과 같은) DOM 트리안에 로컬이나 원격 XML 파일을 읽기 위해 XMLHttpRequest를 사용한다면, evaluateXPath()의 첫 번째 전달인자는 req.responseXML가 되어야 합니다.

사용예

다음과 같은 XML 문서가 있다고 가정합니다.(How to Create a DOM tree와 Parsing and serializing XML을 참조하십시오.):

<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>

XPath 표현으로 문서에 "query"를 보낼 수 있습니다. 비록 DOM 트리를 탐색하는 것이 비슷한 결과를 가져오더라도 XPath를 사용하는 것이 더 빠르고 강력합니다. 만일 id attribute를 사용한다면 document.getElementById()를 사용해도 여전히 강력합니다. 하지만, XPath 만큼 강력하지 않습니다. 몇 가지 예제가 있습니다:

// display the last names of all people in the doc
var results = evaluateXPath(people, "//person/@last-name");
for (var i in results)
  alert("Person #" + i + " has the last name " + results[i].value);

// get the 2nd person node
results = evaluateXPath(people, "/people/person[2]");

// get all the person nodes that have addresses in denver
results = evaluateXPath(people, "//person[address/@city='denver']");

// get all the addresses that have "south" in the street name
results = evaluateXPath(people,  "//address[contains(@street, 'south')]");
alert(results.length);

정보

• XPath
• XPath Visualizer for Mozilla and Firefox
• XPath tutorial
• Forum discussion on this topic
• Using the Mozilla JavaScript Interface to XPath - 자바스크립트로 XPath를 사용하는 것에 대한 튜터리얼