使用document.querySelectorAll()以及map()函数的JavaScript

在JavaScript中，使用document.querySelectorAll()方法可以获取文档中匹配给定CSS选择器的所有元素。这些元素将被返回为一个NodeList对象，可以通过索引访问。然而，它们不能直接在上面执行map()函数，因为NodeList不是一个数组。但是，我们可以将NodeList对象转换为数组，然后使用map()函数来操作数组的每个元素。

将NodeList转换为数组

我们可以使用ES6中的Array.from()方法将NodeList对象转换为数组。以下是一个将所有 ".item" 元素转换为数组的示例：

const items = Array.from(document.querySelectorAll('.item'));

现在，我们可以在items数组上使用map()函数。

使用map()函数

map()函数接受一个回调函数作为参数，该回调函数对数组的每个元素进行操作，并返回一个新的数组。以下是一个使用map()函数添加 ".selected" 类的示例：

const items = Array.from(document.querySelectorAll('.item'));
const selectedItems = items.map(item => {
  item.classList.add('selected');
  return item;
});

在上面的代码中，我们首先将NodeList对象转换为数组。然后，我们使用map()函数迭代items数组的每个元素，并添加 ".selected"类。最后，我们返回每个元素以创建新数组。现在，selectedItems数组包含所有 ".item" 元素，并且它们都已添加 ".selected" 类。

实用示例

以下是一个使用map()函数和模板字面量创建一个包含每个 ".item" 元素HTML的数组的示例：

const items = Array.from(document.querySelectorAll('.item'));
const itemHTML = items.map(item => `<li>${item.innerHTML}</li>`);
console.log(itemHTML);

在上面的代码中，我们首先将NodeList对象转换为数组。然后，我们使用map()函数迭代items数组的每个元素，并使用模板字面量将元素的HTML转换为一个列表项。最后，我们将列表项HTML存储在itemHTML数组中，并将其记录到控制台中。

结论

使用document.querySelectorAll()和map()函数可以让您更方便地操作文档中的元素。将NodeList对象转换为数组，然后在操作数组上使用map()函数，可以让代码更加简洁和易读。