Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Next Steps

Just want to confirm my understanding regarding Text Node

Initially, I was pretty confused regarding how to access the text node "Confirmed" next to the checkbox inside the <li>. :confused:

And then after some googling, I found this resource, and I find it to be very helpful in explaining the DOM tree & its nodes: https://javascript.info/dom-nodes

From what I understand, DOM trees have 3 nodes:

  • element node
  • text node
  • document node

Element Node:

  • if an HTML tag doesn't have any children, then text inside it is considered inside element node
  • and can be accessed using firstElementChild
  • example:
<span>this is inside element node, because this span doesn't have any other child</span>

Text Node:

  • if an HTML tag have children, then the text inside it is considered inside a text node
  • and can only be accessed using firstChild
  • example, the text 'Confirm' below is inside a text node, because <label> has other child, which is <input>
<label>
  Confirm
  <input type="checkbox">
</label>

I would really appreciate if anyone can help me confirm my understanding, and point out if it's correct or not. Thx.

And if it's correct, then hopefully what I wrote above help others understand this concept as well :smiley:

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

I think you've got a good understanding here.

You're using the DOM Tree to figure out which elements and their descendants you need to use and select.

You can use DOM Traversal as well to select adjacent elements. The best way to get a handle on it all is to practice with code. :-)

Thanks Jonathan