OK, guys, this one is driving me nuts. I'm doing a little bit of Javascript studying and trying to understand how the JS is resolving this. Here's the code fragment:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Programmer's Reference</title>
</head>
<body>
<p id="myParagraph">This is my paragraph! <span class="hideme1">Lorem ipsum</span> dolor sit amet.
<span></span>
</p>
<p class="hideme2">Another paragraph!</p>
<script>
alert(document.childNodes[1].childNodes[2].childNodes[3].className); // will alert "hideme2"
</script>
</body>
</html>
Now, if the HTML (DOM?) is organized in a tree then how does the reference "document.childNodes[1].childNodes[2].childNodes[3] get us to that 2nd paragraph in the body? The alert displays 'hideme2'.
I can see that DOCTYPE is document.childNodes[0] and the HTML block is document.childNodes[1]. I would expect , then to be document.childNodes[1].childNodes[1], right? I don't see how there is even a document.childNodes[1].childNodes[2], let alone a 3rd level under it.
I'm obviously missing something here but only see 3 elements that are subordinate to the body, 2 paragraphs and the block. I would expect the 2nd paragraph to, then, be document.childNodes[1].childNodes[1].childNodes[1] (Assuming everything is 0-based, as usual). What am I not seeing here?
Thanks,
CM
<b>What I have tried:</b>
Scratching my head and studying DOM references.