求助：如何在DOM中获取Alt属性文本并提取产品信息存入对象？

针对你的需求，这里有几种高效的实现方式，核心思路是利用alt属性中结构化的分隔字符串（用|分隔）提取字段，最终转化为产品对象。

一、原生JavaScript基础实现 #

这是最通用的方案，不需要依赖任何库：

// 1. 定位目标产品元素
const productDiv = document.querySelector('.product');

// 2. 获取alt属性值并按分隔符拆分
const productDetails = productDiv.getAttribute('alt').split('|');

// 3. 映射为结构化产品对象
const product = {
  id: productDetails[0],
  name: productDetails[1],
  price: productDetails[2],
  size: productDetails[3], // 你需要的尺码
  color: productDetails[4], // 你需要的颜色
  stock: productDetails[5],
  category: productDetails[6]
};

console.log(product);
// 输出结果：
// {
//   id: "0001",
//   name: "Plain White T-Shirt",
//   price: "4.99",
//   size: "M",
//   color: "White",
//   stock: "25",
//   category: "Mens-Tshirts"
// }

二、增加异常处理的健壮版本 #

如果页面中可能存在缺少alt属性或格式不规范的情况，建议加入异常判断，避免代码报错：

const productDiv = document.querySelector('.product');

// 检查元素是否存在
if (!productDiv) {
  console.error('未找到目标产品元素');
} else {
  const altText = productDiv.getAttribute('alt');
  // 检查alt属性是否存在
  if (!altText) {
    console.error('产品元素缺少必要的alt属性');
  } else {
    const productDetails = altText.split('|');
    // 检查字段数量是否符合预期
    if (productDetails.length !== 7) {
      console.warn('产品信息格式不符合预期，可能存在字段缺失');
    }
    // 构建对象时加入默认值，避免undefined
    const product = {
      id: productDetails[0] || '',
      name: productDetails[1] || '',
      price: productDetails[2] || '',
      size: productDetails[3] || '',
      color: productDetails[4] || '',
      stock: productDetails[5] || '',
      category: productDetails[6] || ''
    };
    console.log(product);
  }
}

三、批量处理多个产品元素 #

如果页面中有多个同类产品div，可以用querySelectorAll批量提取：

const productDivs = document.querySelectorAll('.product');
const productList = [];

productDivs.forEach(div => {
  const altText = div.getAttribute('alt');
  if (!altText) return; // 跳过缺少alt属性的元素
  
  const details = altText.split('|');
  productList.push({
    id: details[0] || '',
    name: details[1] || '',
    price: details[2] || '',
    size: details[3] || '',
    color: details[4] || '',
    stock: details[5] || '',
    category: details[6] || ''
  });
});

console.log(productList); // 所有产品的数组集合

额外建议：更规范的结构化数据存储方式 #

需要注意的是，alt属性原本是为图片提供替代文本设计的，用它来存储产品结构化数据并不符合HTML语义规范。如果这是你可控的项目，建议改用data-*自定义属性，代码可读性和维护性会更好：

修改后的HTML结构 #

<div class="product col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12"
     data-id="0001"
     data-name="Plain White T-Shirt"
     data-price="4.99"
     data-size="M"
     data-color="White"
     data-stock="25"
     data-category="Mens-Tshirts">
  <!-- 原有内容 -->
</div>

对应的提取代码 #

const productDiv = document.querySelector('.product');
const product = {
  id: productDiv.dataset.id,
  name: productDiv.dataset.name,
  price: productDiv.dataset.price,
  size: productDiv.dataset.size,
  color: productDiv.dataset.color,
  stock: productDiv.dataset.stock,
  category: productDiv.dataset.category
};

这种方式更符合HTML标准，也更直观，后续维护时不容易出错。

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