# Traversing the DOM

**URL:** https://forum.kirupa.com/t/traversing-the-dom/352073
**Category:** programming
**Created:** [November 21, 2014, 4:02am UTC](https://forum.kirupa.com/t/traversing-the-dom/352073 "2014-11-21T04:02:13Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 21, 2014, 4:02am UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/1 "2014-11-21T04:02:15Z")

</div>

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 [http://www.kirupa.com/html5/traversing\_the\_dom.htm](http://www.kirupa.com/html5/traversing_the_dom.htm)

---

<div class="post-metadata">

### Author: ![jsrookie](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jsrookie](https://forum.kirupa.com/u/jsrookie)
#### Post date: [December 22, 2014, 11:45pm UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/2 "2014-12-22T23:45:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 23, 2014, 2:12am UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/3 "2014-12-23T02:12:02Z")

</div>

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

---

<div class="post-metadata">

### Author: ![icio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/icio/32/484_2.png) [@icio](https://forum.kirupa.com/u/icio)
#### Post date: [January 9, 2015, 5:12pm UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/4 "2015-01-09T17:12:57Z")

</div>

If you’re traversing `nextSibling` or `previousSibling`, or iterating across `childNodes` you might come across [Comment](https://developer.mozilla.org/en/docs/Web/API/Comment) nodes, too! You won’t if you’re sticking to `children`, `nextSiblingElement`, and `previousSiblingElement`, though.

![](https://forum.kirupa.com/uploads/kirupa/7142/8ba1ee85e73eb773.png)

---

<div class="post-metadata">

### Author: ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)
#### Post date: [January 10, 2015, 3:20am UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/5 "2015-01-10T03:20:59Z")

</div>

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

![](http://forum.kirupa.com/uploads/kirupa/7146/5c63a5423c1ae9a3.png)

---

<div class="post-metadata">

### Author: ![icio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/icio/32/484_2.png) [@icio](https://forum.kirupa.com/u/icio)
#### Post date: [January 11, 2015, 4:16am UTC](https://forum.kirupa.com/t/traversing-the-dom/352073/6 "2015-01-11T04:16:41Z")

</div>

krilnon, that’s because CDATA sections are specific to XML documents and are unsupported in HTML. Where they are supported, [CDATASections are text nodes](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-667469212). See for example, this XHTML Strict document:

![](http://forum.kirupa.com/uploads/kirupa/7150/aa779b3fcbe74732.png)
