如何在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到节点列表，通过转换成数组然后循环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

除了 Itang 和 Foo 的建议，您还可以使用：

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

公平地说，我认为 Foo 使用扩展语法的建议可能是最优雅的，我只是不确定 NodeLists 支持扩展运算符的范围。（粘贴在下面以供参考）

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

Answer 3

如果您使用 ES6，则可以使用[...selectors]如下语法：

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList([...document.querySelectorAll("li")]);

<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>

获取列表后，我们还可以使用map函数，或者使用语法循环列表for...of...。

Array(...selectors)使用方法相同：

let getMappingList = function (list) {
  console.log(typeof list);

  for (let item of list) {
    console.log(item);
  }
  
  console.log("___________________");
  
  list.map(item => console.log(item));
};

getMappingList(Array(...document.querySelectorAll("li")));

<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 4

我知道这是一个旧线程，但在 Google 搜索结果中列为#1。因此，这里为有需要的人提供一个替代方案。

let items = [].map.call(list, item => console.log(item));