新手求教：如何用document.getElementsByClassName提取多组元素值

首先明确：你想要的目标JSON格式存在问题——JSON对象不允许重复的键名，后面的pizzatype等键会直接覆盖前面的，最终只能保留最后一组数据。正确的存储方式是用数组，每个数组元素对应一组完整的订单信息，格式如下：

[
  {"pizzatype":"valuex1","pizzacheese":"valuex2","pizzasauce":"valuex3","ordertotal":"valuex4"},
  {"pizzatype":"valuey1","pizzacheese":"valuey2","pizzasauce":"valuey3","ordertotal":"valuey4"}
]

以下是实现代码：

// 获取所有对应类的元素，转成数组方便遍历操作
const pizzaTypes = Array.from(document.getElementsByClassName("pizzapizza"));
const pizzaCheeses = Array.from(document.getElementsByClassName("cheesecheese"));
const pizzaSauces = Array.from(document.getElementsByClassName("saucesauce"));
const orderTotals = Array.from(document.getElementsByClassName("fiyat"));

// 取元素数量作为订单组数（假设四类元素数量一致）
const orderCount = pizzaTypes.length;
const orders = [];

// 循环提取每一组数据
for (let i = 0; i < orderCount; i++) {
  const singleOrder = {
    pizzatype: pizzaTypes[i].innerHTML,
    pizzacheese: pizzaCheeses[i].innerHTML,
    pizzasauce: pizzaSauces[i].innerHTML,
    ordertotal: orderTotals[i].innerHTML
  };
  orders.push(singleOrder);
}

const result = JSON.stringify(orders);
console.log(result);

补充说明： #

• Array.from()将getElementsByClassName返回的HTMLCollection转为数组，方便通过索引直接访问元素；
• 如果页面中四类元素数量可能不一致（比如部分订单缺少某个属性），可以用可选链操作符避免报错：

  const singleOrder = {
    pizzatype: pizzaTypes[i]?.innerHTML || '无数据',
    pizzacheese: pizzaCheeses[i]?.innerHTML || '无数据',
    pizzasauce: pizzaSauces[i]?.innerHTML || '无数据',
    ordertotal: orderTotals[i]?.innerHTML || '无数据'
  };
  

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