Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Removing an Element from the DOM

Posted by Brian Hudson
Brian Hudson
14,773 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,258 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,258 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,773 Points
Brian Hudson
Brian Hudson
14,773 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');