时间戳

首页 > 解决方案 > 如何在 javascript 的节点列表中使用 .map()？

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

问题描述

为什么我会收到此错误？当我选择<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);
    })

标签： javascript

解决方案

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>

推荐阅读