There I was, after going through a few beginning DOM tutorials, I finally thought of getting my feet wet. So I wrote myself a simple HTML:
<html>
<head>
<title>My DOM Title</title>
</head>
<body>
<h1>My DOM Heading</h1>
<p>DOM is so easy!</p>
</body>
</html>
And added the following JS to the onload event of the body:
onload=”var obj = document.documentElement.firstChild.nextSibling.firstChild; alert(obj.innerHTML);”
The document.documentElement point to the root of the document, which is the <html> element. The firstChild of <html> is the <head> element. The <head> element’s nextSibling is the <body> element, and its firstChild is the <h1> element. So it should alert the innerHTML of the <h1> element i.e. “My DOM Heading”.
But to my surprise, the alert shows an undefined message. After doing abit of research on the issue, I was finally able to understand the problem: Whitespace. The browser considers the endline between elements as whitespace, and these whitespaces are parsed as DOM nodes. So when I referred to document.documentElement.firstChild, it actually pointed to the whitespace between the <html> and <head> element. Therefore, my JS actually pointed to the whitespace between the <head> and <title> elements. Funny isn’t it?
By the way, I only found this problem in Firefox. IE seemed to be working fine.
Here’s a resource from Mozilla
http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM
very interesting, but I don’t agree with you
Idetrorce
http://hotnovelty.info/micro-bikini/mesh-micro-bikini.html