Share your knowledge: Javascript XPath Demo

Tuesday, April 15, 2014

	<!DOCTYPE html>
	<html>
	<head>
	<title>Xpath demo</title>
	<script data-main="scripts/xpath" src="scripts/require.js"></script>
	</head>
	<body>
	<h1>This is a demo showing querying the dom via Xpath<h1>
	<ul>
	<li>Javascript</li>
	<li>Java</li>
	<li>Scala</li>
	<li>Ceylon</li>
	<li>Python</li>
	</ul>
	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub

	/**
	https://developer.mozilla.org/en-US/docs/Web/XPath
	**/
	requirejs([], function() {
	//count the number of <li> tags
	var listItemCount = document.evaluate( 'count(/html/body//li)', document, null, XPathResult.ANY_TYPE, null );
	alert("There are " + listItemCount.numberValue + " <li> tags inside the <body> tag");
	//output: There are 5 <li> tags inside the <body> tag

	//stringjoin the values of the <li> nodes
	var iterator = document.evaluate('/html/body//li', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null );

	var listItem;
	var listItemValues = [];
	while (listItem = iterator.iterateNext()) {
	listItemValues.push(listItem.textContent);
	}
	alert("The languages listed are '" + listItemValues.join() + "'.");
	//output: The languages listed are 'Javascript,Java,Scala,Ceylon,Python'.
	});

view raw gistfile1.js hosted with ❤ by GitHub

Share your knowledge