Traversing the DOM

Easily navigate the mean streets of our DOM by learning how to use the helpful built-in properties and methods.
This is a companion discussion topic for the original entry at

Hey Kirupa,

Thank you for these great tutorials, so simple! Is it worth mentioning here that whitespace and carriage returns can create text nodes in most browsers, resulting in these properties not working as intuitively as their names suggest? The difference between say for example, nextSibling and nextElementSibling.

1 Like

That’s a good point. I’ll add a note to the tutorial with your comment shortly :slight_smile:

If you’re traversing nextSibling or previousSibling, or iterating across childNodes you might come across Comment nodes, too! You won’t if you’re sticking to children, nextSiblingElement, and previousSiblingElement, though.

Inspired by icio’s post, I wondered about CDATA nodes. Apparently they’re sort of converted to comments, which makes sense.

krilnon, that’s because CDATA sections are specific to XML documents and are unsupported in HTML. Where they are supported, CDATASections are text nodes. See for example, this XHTML Strict document: