ymkjp/XPath_sample.html

## XPath_sample.html
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Performance: NodeList vs. Array</title>
    <script type="text/javascript">
        var result = document.evaluate(
                // 1.    <div> id == main
                // 2.    3rd <p> class == content
                // 3.    <a> starts with href http://example.com/
                '//div[@id="main"]/p[contains(@class, "content")][3]/a[starts-with(@href, "http://example.com/")]',
                document,
                null,
                XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
                null
         );
        alert(result.snapshotLength);   // => 1
        var elem = result.snapshotItem(0);
        alert(elem.innerHTML);  // => 4th link
    </script>
</head>
<body>
    <div id="main">
        <p class="content">
            <a class="link" href="http://exmaple.com/">1st link</a>
        </p>
        <p class="dummy">
        </p>
        <p class="content">
            <a href="http://example.com/">2nd link</a>
        </p>
        <p class="content">
            <a href="http://foobar.exmaple.com/">3rd link</a>
            <a href="http://example.com/">4th link</a>
        </p>
        <a href="http://example.com/">5th link</a>
    </div>

</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Performance: NodeList vs. Array</title>
	<script type="text/javascript">
	var result = document.evaluate(
	// 1. <div> id == main
	// 2. 3rd <p> class == content
	// 3. <a> starts with href http://example.com/
	'//div[@id="main"]/p[contains(@class, "content")][3]/a[starts-with(@href, "http://example.com/")]',
	document,
	null,
	XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
	null
	);
	alert(result.snapshotLength); // => 1
	var elem = result.snapshotItem(0);
	alert(elem.innerHTML); // => 4th link
	</script>
	</head>
	<body>
	<div id="main">
	<p class="content">
	<a class="link" href="http://exmaple.com/">1st link</a>
	</p>
	<p class="dummy">
	</p>
	<p class="content">
	<a href="http://example.com/">2nd link</a>
	</p>
	<p class="content">
	<a href="http://foobar.exmaple.com/">3rd link</a>
	<a href="http://example.com/">4th link</a>
	</p>
	<a href="http://example.com/">5th link</a>
	</div>

	</body>
	</html>