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

Posted by Brian Hudson
Brian Hudson
14,785 Points

Select the first list item element and store it in the variable firstListItem

Why doesn't this code work?

''' let myList = document.querySelector('ul'); let firstListItem = document.querySelector('li')[0];

'''

I get an error message saying " 'firstListItem' is undefined. Make sure you've assigned a value to 'firstListItem'

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.querySelector('ul');
let firstListItem = document.querySelector('li')[0];

3 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

querySelector returns one element, not an array or list, so there is no element [0]. querySelectorAll would work, as it returns a node list, in this case of length 1, so it has an element [0]. there are also other direct ways of selecting the requested element that will work here.

Brian Hudson
Brian Hudson
14,785 Points
Brian Hudson
Brian Hudson
14,785 Points

Ah ok that makes sense, thank you James.

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

you can try different approaches

let firstListItem = document.getElementById('first');
let firstListItem = document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0];
let firstListItem = document.querySelector('#first');