Taking a div tag with a three img elements inside as an example, is it the order in which I add these elements to the div (ie the inline positions in which they are placed) which dictates their hierarchy in the childNodes array ?
Yes. But it’s a bit more complicated than that, because normally there is whitespace in between elements. That whitespace counts as a textNode.
<body>
<div id="d">
<img src="1.jpg">
<img src="3.jpg">
<img src="2.jpg">
</div>
</body>
In the HTML above, the DIV has three images in it, but it has 7 children - 3 IMG elements and 4 text nodes. You could access the second image in a multitude of ways:
document.getElementById('d').getElementsByTagName('img')[1];
document.body.getElementById('d').getElementsByTagName('img')[1];
document.body.getElementById('d').getElementsByTagName('img')[1]; // *
document.getElementsByTagName('img')[1];
document.getElementById('d').childNodes[3];
document.getElementById('d').firstChild.nextSibling.nextSibling.nextSibling;
document.getElementById('d').lastChild.previousSibling.previousSibling.previousSibling;
// or you can "save" the DIV in a variable:
var div = document.getElementsByTagName('div')[0];
var div = document.getElementById('d'); // *
var div = document.body.firstChild.nextSibling;
var div = document.getElementsByTagName('div')[0];
//and then access the img using the div var:
div.childNodes[3];
div.firstChild.nextSibling.nextSibling.nextSibling;
div.getElementsByTagName('img')[1]; // *
div.getElementsByTagName('img')[0].nextSibling.nextSibling;
This is why childNodes can be problematic, and also nextSibling/previousSibling. Using getElementsByTagName negates this issue. The whitespace stuff is a bit of an annoyance when you need to go through every child of an element, so people often write wrapper functions that check the nodeType. There’s a property called nextElementSibling which is more useful because it ignores the textNodes, but unfortunately doesn’t enjoy adequate browser support yet.
Of course another solution is to simply strip out the whitespace between elements in your HTML. This, however, makes it less legible. It is better to write your code in a way where it doesn’t matter whether there’s whitespace there or not.
Obviously some of those examples above are silly. The ones I marked with an asterisk are probably the best. They’re shorter and won’t break if things change in the DOM.
It’s worth noting that document.body is a special case. It exists because the body is a single item that is useful to be able to access easily rather than having to document.getElementsByTagName(‘body’)[0].
As for tutorials, this is a classic introduction to the DOM, and I like [URL=“http://www.howtocreate.co.uk/tutorials/javascript/dombasics”]this too. It’s also worth just spending lots of time investigating the [URL=“https://developer.mozilla.org/En/DOM/”]Gecko DOM reference over at the MDC once you get the hang of things.
a function which allows me to pass an element’s ID which then document.writes its relevant hierarchical position within a parent node?
Try to get out of the habit of using document.write. It’s on its way out. Use alert() to quickly get the value of things, or console.log with Firebug.
Firebug is very good for having a good look at the DOM. You can just click something and it’ll show you where in the tree it is. If you install the Firefinder plugin for Firebug (google it), you can type in a CSS selector like “#d img + img” and then it’ll highlight it on the page and find it for you in the DOM tree.