JavaScript Examples from developer.mozilla.org

Recurse through child nodes.js

// The following function recursively calls a callback function for each node contained by a root node 
// (including the root itself):

function eachNode(rootNode, callback)
 {
	if (!callback)
     {
		const nodes = []
		eachNode(rootNode, function(node)
                  {
			nodes.push(node)
		 })
		return nodes
	 }

	if (false === callback(rootNode))
     {
		return false
     }

	if (rootNode.hasChildNodes())
     {
		const nodes = rootNode.childNodes
		for (let i = 0, l = nodes.length; i < l; ++i)
         {
			if (false === eachNode(nodes[i], callback))
             {
				return
             }
         }
	 }
 }


// Syntax
// eachNode(rootNode, callback)

// Description
// Recursively calls a function for each descendant node of rootNode (including the root itself).
// If callback is omitted, the function returns an Array instead, which contains rootNode and all nodes contained within.
// If callback is provided, and it returns Boolean false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).

// Parameters
// rootNode
//     The Node object whose descendants will be recursed through.
// callback Optional
//     An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an Array of every node contained within rootNode (including the root itself).

// Sample usage
// The following example prints the textContent properties of each <span> tag in a <div> element named "box":
<div id="box">
  <span>Foo</span>
  <span>Bar</span>
  <span>Baz</span>
</div>

const box = document.getElementById("box")
eachNode(box, function(node) {
  if (null != node.textContent) {
    console.log(node.textContent)
  }
})

// The above will result in the following strings printing to the user's console:
// "\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"

// Note: Whitespace forms part of a Text node, meaning indentation and newlines form separate Text between the Element nodes.

// Realistic usage
// The following demonstrates a real-world use of the eachNode() function: searching for text on a web-page.
// We use a wrapper function named grep to do the searching:
function grep(parentNode, pattern) {
	const matches = []
	let endScan = false
	
	eachNode(parentNode, function(node){
		if (endScan) {
			return false
        }
		
		// Ignore anything which isn't a text node
		if (node.nodeType !== Node.TEXT_NODE) {
			return
        }

		if (typeof pattern === "string") {
			if (-1 !== node.textContent.indexOf(pattern)) {
				matches.push(node)
            }
		}
		else if (pattern.test(node.textContent)) {
			if (!pattern.global) {
				endScan = true
				matches = node
			}
			else {
                matches.push(node)
            }
		}
	})
	return matches
}

// For example, to find Text nodes that contain typos:
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
const mistakes = grep(document.body, pattern)
console.log(mistakes)

Remove all children nested within a node.js

function removeAllChildren(element)
 {
    while (element.firstChild)
     {
        element.removeChild(element.firstChild)
     }
 }

// Sample usage
/* ... an alternative to document.body.innerHTML = "" ... */
// removeAllChildren(document.body)