<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>