Accessing Element and Text Nodes Hierarchically

Contact Us or call 1-877-932-8228
Accessing Element and Text Nodes Hierarchically

Accessing Element and Text Nodes Hierarchically

JavaScript provides a variety of methods and properties that provide access to nodes - elements on the page - based on their hierarchical relationship. The most common and best supported of these are shown in the table below:

Properties for Accessing Element Nodes
Property Description
childNodes[] A nodeList containing all of a node's child nodes.
firstChild A reference to a node's first child node.
lastChild A reference to a node's last child node.
nextSibling A reference to the next node at the same level in the document tree.
parentNode A reference to a node's parent node.
previousSibling A reference to the previous node at the same level in the document tree.

As suggested by the square brackets, childNodes[] returns a collection of elements. The other properties return a single node.

These properties offer us a more flexible way to get elements on the page, relative to their parents, siblings, or children. We can do anything with the returned elements that we did previously with getElementById() or querySelector() - set the background color, change the font style, etc.

In the example below, we'll use the innerHTML property to get the HTML text contained inside the nodes we get. Let's take a look at how we might use these properties:

Code Sample:

EventHandlers/Demos/elementNodes.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Accessing Element Nodes</title>
<link href="style.css" rel="stylesheet">
<script>
	function modify() {
		var childFirst = document.getElementById("list1").firstChild;
		childFirst.style.backgroundColor = "red";
		var childLast = document.getElementById("list1").lastChild;
		childLast.style.backgroundColor = "blue";
		var siblingPrev = childLast.previousSibling;
		siblingPrev.style.backgroundColor = "green";
		document.getElementById("message").innerHTML = 'First child text is <strong>'+childFirst.innerHTML+'</strong><br><br>Last child text is <strong>'+childLast.innerHTML+'</strong><br><br>Next to last (previous sibling) text is <strong>'+siblingPrev.innerHTML+'</strong>';
	}
</script>
</head>
<body>
	<button type="button" onclick="modify()">Go</button>
	<ul id="list1"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
	<p id="message"></p>
</body>
</html>

Code Explanation

Our simple page displays a button and five unordered list items, with text "Item 1", "Item 2", etc.

When the user clicks the button, the onclick event handler calls function Modify(), which does the following:

  • Gets the first child of the list using firstChild, and sets its background to red.
  • Gets the last child of the list using lastChild, and sets its background to blue.
  • Gets the next-to-last child of the list using previousSibling (relative to the already-gotten childLast), and sets its background to green.
  • Sets the innerHTML of the paragraph (at the bottom of the page) to display the text from the first, last, and next-to-last list items we got earlier. Note that we use the JavaScript string concatentation operator, +, to build a string from our variables.

Note the special way in which we created the unordered list, with no spaces between any of the tags - that is, with all of the ul and li opening and closing tags on the same line. We did this because, if there were spaces between the tags, the spaces would have counted as "children" (as text nodes) and calls to properties like firstChild would have returned the text node (the space) rather than the first list item as we wished.

We'll ask you to try out these properties in the next exercise.

Next