javascript - 如何在 javascript 的节点列表中使用 .map()？

Question

为什么我会收到这个错误？选择 <li> 时如何访问和打印节点带有 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() 返回一个静态(非实时)NodeList，表示与指定选择器组匹配的文档元素列表。使用 array#from 将 NodeList 转换为数组，然后遍历 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>