Mastering JavaScript

Chapter 8
// run this function when the document is loaded
window.onload = function() {
var doc = document.documentElement;
var body = doc.body;
var _head = doc.firstChild;
var _body = doc.lastChild;
var _head_ = doc.childNodes[0];
var title = _head.firstChild;
alert(_head.parentNode === doc); //true
}
Hello World!
The anonymous function is executed when the browser loads the page. In the
function, we are getting the nodes of the DOM programmatically. The entire HTML
document can be accessed using the document.documentElement function. We
store the document in a variable. Once the document is accessed, we can traverse the
nodes using several helper properties of the document. We are accessing the
element using doc.body. You can traverse through the children of an element using
the childNodes array. The first and last children of a node can be accessed using
additional properties—firstChild and lastChild.
It is not recommended to use render-blocking JavaScript in the
tag. This slows down the page render dramatically. Modern browsers
support the async and defer attributes to indicate to the browsers
that the rendering can go on while the script is being downloaded.
You can use these tags in the tag without worrying about
performance degradation. You can get more information at http://
stackoverflow.com/questions/436411/where-is-the-bestplace-to-put-script-tags-in-html-markup.
Accessing specific nodes
The core DOM defines the getElementsByTagName() method to return NodeList
of all the element objects whose tagName property is equal to a specific value. The
following line of code returns a list of all the elements in a document:
var paragraphs = document.getElementsByTagName('p');
[ 183 ]
www.it-ebooks.info