如何用原生JavaScript拆分元素Alt标签并转为对象数组？

你遇到的「Invalid or unexpected Token」错误其实是个容易忽略的小细节——你在split方法里用了中文双引号（“|”），JS语法要求必须使用英文的单引号或双引号，这就是报错的核心原因。

下面给你实现和jQuery版本功能完全一致的原生JS代码，顺便拆解关键要点：

修复后的完整原生JS代码 #

const products = [];
// 获取页面上所有.product元素
const productElements = document.querySelectorAll('.product');

// 遍历每个产品元素
productElements.forEach(element => {
  const prodOb = {};
  // 注意这里用英文引号拆分alt属性值
  const prodDetails = element.getAttribute('alt').split('|');
  
  // 按需求给对象赋值，和jQuery版本逻辑完全一致
  prodOb.id = prodDetails[0];
  prodOb.name = prodDetails[1];
  prodOb.price = prodDetails[2];
  prodOb.brand = "Some Company";
  
  // 将对象推入结果数组
  products.push(prodOb);
});

console.log(products);

关键细节说明 #

1. 引号问题：一定要用英文引号，中文引号在JS里会被识别为非法字符，这是你之前报错的直接原因
2. 属性获取：因为div的alt不是标准HTML属性，用element.getAttribute('alt')比直接用element.alt更可靠，能避免部分浏览器的兼容性问题
3. 兼容老浏览器的遍历方式：如果需要兼容更老的浏览器，可以把forEach换成传统for循环：

for (let i = 0; i < productElements.length; i++) {
  const element = productElements[i];
  // 剩下的逻辑和forEach版本一致
}

相关学习知识点推荐 #

• DOM属性操作：重点掌握getAttribute()、setAttribute()的用法，区分标准属性和自定义属性的访问差异
• 字符串与数组处理：熟悉split()、push()等基础方法的使用场景
• DOM集合遍历：了解NodeList和HTMLCollection的区别，以及不同遍历方式的适用场景
• 对象与数组基础：学习自定义对象的创建、数组的增删改查基础操作

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