<!DOCTYPE html>
<html lang="en-US">
<body>
<div id="point">
<h2>Heading</h2>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById ("point");
function ElementChecker(node){
if(node.tagName.toLowerCase() == 'p')
return NodeFilter.FILTER_ACCEPT;
else
return NodeFilter.FILTER_SKIP;
}
function myFunction(){
if(document.createNodeIterator){
iterator = document.createNodeIterator (x, NodeFilter.SHOW_ELEMENT, ElementChecker, false);
//get the first matching node
var node = iterator.nextNode();
while(node){
console.log(node);
node = iterator.nextNode();
}
}
else
console.log ("Your browser does not support the createNodeIterator()");
}
</script>
<p><strong>Note</strong>: Open your console (Press F12) and click on the 'Click Me' button to filter all paragraph element(s) inside div tag where id="point".</p> </body>
</html>