Node list instead of list? DOM

JavaScript
1

So here is what I have in my HTML file.

Hello World

    <ul id="list">

        <li>Home</li>

        <li>About</li>

        <li>Contact</li>

        <li>last</li>

    </ul>

So using Javascript and the DOM ı’m trying to log into the console the following
const lis = document.querySelectorAll(“li”);

console.log("This is the " + lis);

The result is: This is the [Object Nodelist]
Why can’t I see the list in the console?

2

What’s wrong with the console?

3

A querySelectorAll returns a NodeList that means it is a list(array like object). Try looping through all the elements of this! and then console logging the innerText of each element inside the loop

2 Likes
4

Also when I change
let heading = document.querySelector(“h1”);
console.log(heading); // this will show the h1 with hello text in it

heading.innerHTML = lis;

console.log(heading); // but this returns object nodelist

5

Thank you! I guess that’s another topic to learn lol

1 Like
6

just do

for(let i of document.querySelectorAll('li')){
 console.log(i.innerText());
}