querySelectorAll修改innerHTML无效，querySelector仅生效首个元素求助

你的代码存在两个关键问题，导致批量修改操作失败：

1. 选择器匹配错误：你最初能正确获取元素的选择器是.product .actions .stock.outofstock（类名间的空格表示后代层级关系），但代码里写成了.product.actions.stock.outofstock（无空格表示单个元素同时拥有这些类），这会导致无法定位到目标节点。
2. NodeList无法直接操作innerHTML：document.querySelectorAll()返回的是NodeList类数组集合，而非单个DOM元素，集合本身没有.innerHTML属性，必须遍历集合内的每个元素逐一修改。

正确的批量修改代码 #

方法1：使用forEach遍历（推荐，现代浏览器支持）

// 用正确选择器获取所有目标元素
const outOfStockElements = document.querySelectorAll(".product .actions .stock.outofstock");

// 遍历每个元素，替换内容
outOfStockElements.forEach(element => {
  element.innerHTML = element.innerHTML.replace(/Out of stock/g, '<i class="icon-negative"></i>Sold out');
});

方法2：使用for循环（兼容旧浏览器）

const outOfStockElements = document.querySelectorAll(".product .actions .stock.outofstock");

for (let i = 0; i < outOfStockElements.length; i++) {
  const element = outOfStockElements[i];
  element.innerHTML = element.innerHTML.replace(/Out of stock/g, '<i class="icon-negative"></i>Sold out');
}

补充说明 #

• 若需兼容IE11这类老旧浏览器，NodeList.forEach可能不支持，此时for循环是更稳妥的选择。
• 逐个修改元素的innerHTML，能确保每个目标节点的文本都被精准替换。

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