如何在Chrome DevTools中遍历NodeList提取100个.no-red锚点的文本？

嘿，这事儿超简单！你已经用document.querySelectorAll('.no-red')精准定位到了所有目标锚点，接下来用下面几种方法就能轻松提取每个锚点的文本内容：

方法1：直接遍历NodeList（最直观） #

现代浏览器的NodeList已经原生支持forEach方法，直接遍历收集文本就行：

// 先获取所有目标锚点
const anchorNodes = document.querySelectorAll('.no-red');
// 准备数组存储结果
const anchorTexts = [];

anchorNodes.forEach(anchor => {
  // 用innerText过滤图标等不可见元素，trim去除多余空格
  const cleanText = anchor.innerText.trim();
  anchorTexts.push(cleanText);
});

// 查看最终提取的文本数组
console.log(anchorTexts);

方法2：转数组用map（更简洁） #

如果偏爱简洁的链式写法，把NodeList转成数组后用map一步到位：

const anchorNodes = document.querySelectorAll('.no-red');
// 用扩展运算符转数组，再映射提取文本
const anchorTexts = [...anchorNodes].map(anchor => anchor.innerText.trim());

console.log(anchorTexts);

也可以用Array.from()转数组，效果完全一致：

const anchorTexts = Array.from(anchorNodes).map(anchor => anchor.innerText.trim());

方法3：精准提取纯文本节点（跳过所有子元素） #

如果锚点里嵌套了多个子元素（比如你的示例里的<i>图标），想只提取锚点本身的文本内容、彻底跳过子元素的话，可以用这种方法：

const anchorNodes = document.querySelectorAll('.no-red');
const anchorTexts = [...anchorNodes].map(anchor => {
  // 筛选出所有直接文本节点，拼接后去除空格
  return Array.from(anchor.childNodes)
    .filter(node => node.nodeType === Node.TEXT_NODE)
    .map(node => node.textContent.trim())
    .join('');
});

console.log(anchorTexts);

小细节说明：innerText vs textContent #

你的示例里有Font Awesome图标，用innerText会自动忽略这些图标元素的内容，只保留页面上可见的纯文本；如果用textContent可能会拿到图标的Unicode特殊字符（比如），所以innerText.trim()是更稳妥的选择。

内容的提问来源于stack exchange，提问作者CuriousDev