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 JavaScript and the DOM (Retiring) Making Changes to the DOM Removing an Element from the DOM

Y B
Y B
14,136 Points
Posted by Y B
Y B
14,136 Points

Js DOM , node vs element

I had thought that a node was a 'tree' of elements or if it only contained one element then it was an element, but failing at the challenge below looks like this isn't the case.

Below I tried to select the first list item. However the error i got said this was a node not an html element. I'm not clear what the actual returned object would look like in this case?

let myList = document.getElementsByTagName('ul')[0]; let firstListItem = myList.firstChild;

index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <ul>
            <li id="first">First Item</li>
            <li id="second">Second Item</li>
            <li id="third">Third Item</li>
        </ul>
        <script src="app.js"></script>
    </body>
</html>
app.js 
let myList = document.getElementsByTagName('ul')[0];
let firstListItem = myList.firstChild;

1 Answer

Ella Ruokokoski
Ella Ruokokoski
20,881 Points

The Node objects means any type of object in the DOM, not just HTML elements. Text is considered as nodes and whitespace between elements as text. In this challenge the firstChild; selects the whitespace in front of the li element instead of the fist li element. It is better to use document.getElementById() for example.