如何批量获取HTML列表中所有项的innerHTML与URL？

你可以通过以下几种方式修改代码，实现批量获取所有目标元素的信息：

方法1：使用原生for循环遍历HTMLCollection #

// 获取所有带vxl-filelink-text类的链接元素
const links = document.getElementsByClassName('vxl-filelink-text');
// 用于存储所有链接信息的数组
const linkDetails = [];

// 动态遍历所有元素，避免写死循环次数
for (let i = 0; i < links.length; i++) {
  const currentLink = links[i];
  // 提取当前元素的文本内容和链接地址
  linkDetails.push({
    fileName: currentLink.innerHTML,
    fileUrl: currentLink.href
  });
}

// 一次性输出所有信息，也可用console.table(linkDetails)以表格形式展示
console.log(linkDetails);

方法2：转换为数组后使用forEach遍历 #

getElementsByClassName返回的是HTMLCollection（类数组对象），可以用Array.from()转换成真正的数组，再用forEach遍历：

// 获取元素并转为数组
const linksArray = Array.from(document.getElementsByClassName('vxl-filelink-text'));
const linkDetails = [];

linksArray.forEach(link => {
  // 用textContent.trim()可去除文本前后的空白字符，比innerHTML更干净
  linkDetails.push({
    fileName: link.textContent.trim(),
    fileUrl: link.href
  });
});

console.table(linkDetails); // 表格形式输出更直观

关键修改点说明 #

• 不要写死循环次数（原代码的i < 5），改用links.length动态匹配元素数量，适配元素增删的情况
• 初始化数组存储结果，避免原代码中text未初始化导致的undefined拼接问题
• 遍历过程中逐个提取每个元素的innerHTML/textContent和href，统一存入数组后一次性输出

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