Accessing Element Nodes

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

Accessing Element Nodes

JavaScript provides several different ways to access elements on the page. Let's have a look.

getElementById()

Chances are you have already seen the document.getElementById(id) method, which returns the first element with the given id (there shouldn't be more than one on the page!) or null if none is found. The following example illustrates how getElementById() works:

Code Sample:

HTMLDOM/Demos/getElementById.html
---- C O D E   O M I T T E D ----

function show() {
	var elem = document.getElementById("beatleList");
	alert(elem.innerHTML);
}
---- C O D E   O M I T T E D ----

<body onload="show();">
<h1>Rockbands</h1>
<h2>Beatles</h2>
<ol id="beatleList">
	<li>Paul</li>
	<li>John</li>
	<li>George</li>
	<li>Ringo</li>
</ol>
<h2>Rolling Stones</h2>
<ol id="stonesList">
	<li>Mick</li>
	<li>Keith</li>
	<li>Charlie</li>
	<li>Bill</li>
</ol>
</body>
</html>

Code Explanation

When this page loads, the following alert box will pop up:

getElementsByTagName()

The getElementsByTagName() method of an element node retrieves all descendant (children, grandchildren, etc.) elements of the specified tag name and stores them in a NodeList, which is similar, but not exactly the same as an array of nodes. The following example illustrates how getElementsByTagName() works:

Code Sample:

HTMLDOM/Demos/getElementsByTagName.html
---- C O D E   O M I T T E D ----

function getElements()
{
	var elems = document.getElementsByTagName("li");
	var msg = "";
	for (var i=0; i < elems.length; i++)
	{
		msg += elems[i].innerHTML + "\n";
	}
	alert(msg);
}
</script>
<title>getElementsByTagName()</title>
</head>

<body onload="getElements();">
<h1>Rockbands</h1>
<h2>Beatles</h2>
<ol>
	<li>Paul</li>
	<li>John</li>
	<li>George</li>
	<li>Ringo</li>
</ol>
<h2>Rolling Stones</h2>
<ol>
	<li>Mick</li>
	<li>Keith</li>
	<li>Charlie</li>
	<li>Bill</li>
</ol>
</body>
</html>

Code Explanation

When this page loads, the following alert box will pop up:

getElementsByClassName()

The getElementsByClassName() method is well supported by browsers and is officially part of HTML5. Applicable to all elements that can have descendant elements, getElementsByClassName() is used to retrieve all the descendant (children, grandchildren, etc.) elements of a specific class. For example, the following code would return a node list containing all elements of the "warning" class:

var warnings = document.getElementsByClassName("warning");

querySelectorAll()

The document.querySelectorAll() method gives you access to elements using the CSS selector syntax. For example, the following code would return a node list containing all list items that are direct children of ol tags:

var orderedListItems = document.querySelectorAll("ol>li");

querySelector()

The document.querySelector() method is the same as document.querySelectorAll() but rather than returning a node list, it returns only the first element found. The following two lines of code would both return the first list item found in an ol tag:

var firstOrderedListItem = document.querySelectorAll("ol>li")[0];
var firstOrderedListItem = document.querySelector("ol>li");

The this Object

The this keyword provides access to the current object. It references the object in which it appears.

The following example shows a page (HTMLDOM/Demos/Hierarchy.html) on which a mouse click on any element will display a message giving information about that element's position in the object hierarchy.

When you click on the middle list item, for example, you get the following message:

This shows that the list item's parent is an unordered list (UL), its first child is a text node ("List Item 2"), its last child is the same as it only has one child, its next and previous siblings are both text nodes, and it has only one child node (the text node). Again, this message was generated in Firefox, but would be the same in other modern browsers.

Next