how to use .map() in nodelist in javascript?

Question

Why am i getting this error? How can i access and print the nodes when i'm selecting the <li> tags with querySelectorAll?

script.js:14 Uncaught TypeError: list.map is not a function

HTML

<ul class="wrapper1" id="testDiv">
        <li class="cake">Carrots</li>
        <li class="cake">Cake</li>
        <li class="cake">Wheat</li>
        <li class="cake">Balloons</li>
    </ul>

JS

 let list = document.querySelectorAll("li");
        let items = list.map(elem => {
      console.log(elem);
    })

Answer 1

querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors. Use array#from to convert NodeList to array then iterate through array#map.

let list = document.querySelectorAll("li");
let items = Array.from(list).map(elem => {
  console.log(elem);
})

<ul class="wrapper1" id="testDiv">
    <li class="cake">Carrots</li>
    <li class="cake">Cake</li>
    <li class="cake">Wheat</li>
    <li class="cake">Balloons</li>
</ul>

Answer 2

In addition to Itang and Foo's suggestion, you can also use:

[].concat(document.querySelectorAll("li")).map((el) => { console.log(el); })

In fairness I think Foo's suggestion using spread syntax Is probably the most elegant, I'm just not sure how widely the spread operator is supported for NodeLists. (pasted below for reference)

[...document.querySelectorAll('li')].map((el) => { console.log(el); })