Listing 19.4     /examples/chapter019/19_4_1/index.html

In this example, if() is first used to check the condition as to whether a corresponding ID (here, msg) is contained in the HTML document at all. If that’s true, the element will be manipulated. If it isn’t true, the else branch will be executed, and a corresponding error message will be output to the console.

As briefly indicated at the beginning, this method of accessing elements with the IDs and JavaScript is somewhat outdated. In the past, one simply used as many id attributes as possible, which then, together with the class names for the presentation, made for a rather extensive and confusing HTML document. You can avoid inflating the HTML document with IDs and classes for JavaScript by simply using the appropriate (semantic) elements.

In addition, accessing the element via getElementById() is quite cumbersome and could be done right away using the querySelector method as the better alternative:

...
  let elem = document.querySelector('#msg');
... 

Listing 19.5     /examples/chapter019/19_4_1/js/script-2.js

The use of querySelector('#msg') shown here corresponds to that with getElementById('msg'). In addition, querySelector() also makes it much clearer to access the common CSS selectors, such as #msg, for an ID here.

19.4.2    Finding HTML Elements with a Specific Tag Name

Here’s a simple example that demonstrates how you can use getElementsByTagName(). First of all, here’s the HTML document again:

...
<article id="lead">
  <h2>The DOM interface</h2>
  <p>First paragraph text in the article</p>
  <p>Second paragraph text in the article</p>
</article>

<p>First paragraph text outside the article</p>
<p>Second paragraph text outside the article</p>

    <h2>Output:</h2>
    <output></output>
    <script src="js/script.js"></script>

... 

Listing 19.6     /examples/chapter019/19_4_2/index.html

And here’s the JavaScript code for it:

Listing 19.7     /examples/chapter019/19_4_2/js/script.js

At the beginning, after calling let pElements = document.getElementsByTagName('p');, all found p elements of the HTML document are contained in pElements. pElements.length contains the number of p elements in a for loop, and the length property as a termination condition allows you to use console.log() to output the individual elements found with the index in the square brackets and the innerHTML property to the JavaScript console for demonstration. Then, we still incorporate this information into the htmlText string with the number of p elements found in the HTML document.

...
let articleElements = document.getElementById('lead');
let articlePElements;
if (articleElements) {
    articlePElements = articleElements.getElementsByTagName('p');
    htmlText += "Of which contained in the article element: " + 
                articlePElements.length + "<br>";
}
... 

Listing 19.8     /examples/chapter019/19_4_2/js/script.js

First, getElementById() is used to search for an element with the ID lead and, in case of a find within if(), getElementsByTagName() is used to search for the individual p elements. Of course, you could just give the p elements a class name and then search for them, but again, querySelectorAll() provides a method that makes searching for the right elements a breeze. querySelectorAll() works like querySelector(), but this method returns a list of found elements. querySelector(), on the other hand, returns only the first element found that matches the CSS selector. Thus, the preceding lines can be simplified as follows by using querySelectorAll():

...
let articlePElements = document.querySelectorAll('#lead p');
if (articlePElements) {
    htmlText += "Of which contained in the article element: " +
                articlePElements.length + "<br>";
}
... 

Listing 19.9     /examples/chapter019/19_4_2/js/script-2.js

This has the same effect as the preceding example and returns all p elements that are within the ID #lead.

19.4.3    Finding HTML Elements with a Specific “class” Attribute

Here, too, it’s now convenient to use the much more universal querySelectorAll() method in the following way to find all CSS classes:

let myc = document.querySelectorAll('.aClass'); 

19.4.4    Finding HTML Elements with a Specific “name” Attribute

Listing 19.13     /examples/chapter019/19_4_5/index.html

If, in this example, you want to alternate the article elements with special background color, this is easier than you might think if you use querySelectorAll(). Here’s the corresponding example:

let elem = document.querySelectorAll('article:nth-child(odd)');
for (let i = 0; i < elem.length; i++) {
  elem[i].style.backgroundColor = "wheat";
}
... 

Listing 19.14     /examples/chapter019/19_4_5/js/script.js

19.4.6    Other Object and Property Collections

Listing 19.17     /examples/chapter019/19_4_6/js/script-2.js