Servage Magazine

We have earlier seen an introduction to DOM Nodes and Structures in JavaScript. Now let’s discuss some advanced DOM Management Concepts to make best use of it in Web Development.

The document object in the DOM identifies the page itself, and more often than not will serve as the starting point for our DOM crawling. The document object comes with a number of standard properties and methods for accessing collections of elements.

Just as length is a standard property of all arrays, the document object comes with a number of built-in properties containing information about the document. We then wind our way to the element we’re after by chaining those properties and methods together, separated by periods, to form a sort of route through the document.

To give you a general idea of what I mean, the statement in this example says to look on the page (document), find the element that has the id value “beginner”, find the HTML content within that element (innerHTML), and save those contents to a variable (foo).

var foo = document.getElementById( "beginner" ).innerHTML;

Because the chains tend to get long, it is also common to see each property or method broken onto its own line to make it easier to read at a glance.

Remember, whitespace in JavaScript is ignored, so this has no effect on how the statement is parsed.

var foo = document
.getElementById( "beginner" )
.innerHTML;

There are several methods for accessing nodes in the document.

By element name

getElementsByTagName()

We can access individual elements by the tags themselves using document. getElementsByTagName(). This method retrieves any element or elements you specify as an argument.

For example, document.getElementsByTagName(“p”) returns every paragraph on the page, wrapped in something called a collection or nodeList, in the order they appear in the document from top to bottom. nodeLists behave much like arrays. To access specific paragraphs in the nodeList, we reference them by their index, just like an array.

var paragraphs = document.getElementsByTagName("p");

Based on this variable statement, paragraphs[0] is a reference to the first paragraph in the document, paragraph[1] refers to the second, and so on.

If we had to access each element in the nodeList separately, one at a time… well, it’s a good thing we learned about looping through arrays earlier.

Loops work the exact same way with a nodeList.

var paragraphs = document.getElementsByTagName("p");
for( var i = 0; i < paragraphs.length; i++ ) {
// do something
}

Now we can access each paragraph on the page individually by referencing paragraphs[i] inside the loop, just as with an array, but with elements on the page instead of values.

By id attribute value

getElementById()

This method returns a single element based on that element’s ID (the value of its id attribute), which we provide to the method as an argument. For example, to access this particular image:

<img src="photo.jpg" alt="" id="lead-photo">'
we include the id value as an argument for the getElementById() method:
var photo = document.getElementById("lead-photo");

Resources for further reading

W3 Schools

JavaScript