<html>
<head>
<title>DOM Level 3 XPath Example</title>
<script language="javascript" type="text/javascript" src="html-xpath.js"></script>
</head>
<body>
<div class="Test">
Test Node <span class="Number">1</span>
</div>
<span id="TestingGround">
<div class="SomeOtherClass">
<div class="Test" id="ContextNodeTest">
Test Node <span class="Number">2</span>
<p>Test Node <span class="Number">3</span>: Unclosed Paragraph tag
<div class="Test">
Test Node <span class="Number">4</span>: Nesting
</div>
<img src="rainbow.jpg" alt="Something I found in my backyard" width="100" height="200" alt="Test image" someOtherAttribute="someOtherValue" />
<img src="carnation.jpg" alt="Carnation" width="99" height="74">
</div>
</div>
</span>
<script language="javascript">
function showIterator(title, result)
{
var s = title;
var item;
while(item = result.iterateNext())
{
s += "<div class=\"XPathResultItem\">" + (item.nodeType == 1 ? item.innerHTML.replace(/</g, "<").replace(/>/g, ">") : item.nodeValue) + "</div>";
}
document.write(s);
}
// Evaluate 1
var result = document.evaluate("//div[@class='Test']", document, null, XPathResult.STRING_TYPE, null);
document.write("<h1>\"//div[@class='Test']\" as String</h1>" + result.getStringValue());
// Evaluate 2
document.evaluate("//img[@width < 100]/@height", document, null, XPathResult.NUMBER_TYPE, result);
document.write("<h1>\"//img[@width < 100]/@height\" as Number</h1>" + result.getNumberValue());
// Evaluate 3
showIterator
(
"<h1>\"//div[@class='Test']\" in context of document</h1>",
document.evaluate("//div[@class='Test']", document, null, XPathResult.ANY_TYPE, result)
);
// Evaluate 4
showIterator
(
"<h1>\"div[@class='Test']\" in context of a specific node (id=\"ContextNodeTest\")</h1>",
document.evaluate("div[@class='Test']", document.getElementById("ContextNodeTest"), null, XPathResult.ANY_TYPE, result)
);
// Evaluate 5
showIterator
(
"<h1>\"//div/@class\": Retrieve Attribute Values</h1>",
document.evaluate("//div/@class", document, null, 0, result)
);
// Evaluate 6
var result = document.evaluate("count(//span[@class='Number'])", document, null, XPathResult.NUMBER_TYPE, null);
document.write("<h1>\"count(//span[@class='Number'])\" as Number</h1>" + result.getNumberValue());
</script>
</body>
</html>