Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Chapter 4 ■ HTML and JavaScript
You can achieve this by calling a function when the document has finished loading. The document has finished
loading when the DOMContentLoaded event of the document object gets triggered. This event tells JavaScript that the
structure of the page (the DOM) is ready for your code to work with it, and when it’s ready, call the function. Similar to
getElementsByClassName, DOMContentLoaded works in IE starting with version 9.
function findElements()
{
var listElements = document.getElementsByTagName('li');
var paragraphs = document.getElementsByTagName('p');
var msg = 'This document contains ' + listElements.length +
' list items\n';
msg += 'and ' + paragraphs.length + ' paragraphs.';
alert(msg);
}
document.addEventListener("DOMContentLoaded", findElements, false);
If you open the HTML document in a browser now, you’ll see an alert like the one in Figure 4-9 with the right
number of list elements and paragraphs.
Figure 4-9. Output alert indicating the number of found elements
You can access each of the elements of a certain name like you access an array—once again bearing in mind that
the counter of an array starts at 0 and not at 1:
// Get the first paragraph
var firstpara = document.getElementsByTagName('p')[0];
// Get the second list item
var secondListItem = document.getElementsByTagName('p')[1];
You can combine several getElementsByTagName() method calls to read child elements directly. For example,
to reach the first link item inside the third list item, you use
var targetLink=document.getElementsByTagName('li')[2].getElementsByTagName('a')[0];
This can get pretty messy, though, and there are more clever ways to reach child elements—we’ll get to these in
a second. If you want to reach the last element, you can use the length property of the array:
var lastListElement = listElements[listElements.length - 1];
80
www.it-ebooks.info