求助：querySelectorAll获取.add-to-cart-btn返回NodeList长度为0，getElementsByClassName可用

核心原因 #

• 异步执行时机不对：fetch 是异步操作，要等数据请求完成后才会调用 showProducts 向DOM插入带 .add-to-cart-btn 的按钮。但你在全局直接写的 document.querySelectorAll(".add-to-cart-btn") 会在页面加载时立刻执行——这时候按钮还没被渲染到DOM里，所以返回空的NodeList。
• 静态集合和动态集合的差异：
  • querySelectorAll 返回的是静态快照，只会记录执行那一刻的DOM状态，后续DOM更新不会同步到这个集合里。
  • getElementsByClassName 返回的是动态集合，会实时跟踪DOM变化，等按钮被插入后，这个集合会自动包含新元素，所以你后续访问它时能拿到目标元素。

两种解决办法 #

办法1：在渲染完成后再获取元素 #

把获取按钮的代码放到 showProducts 函数的最后，确保按钮已经插入DOM后再执行：

const showProducts = (productsArr) => {
  productsArr.forEach(({ image, category, name, price }, index) => {
    dessertCartContainer.innerHTML += `
        <div>
          <img src="${image.mobile}" class="product-img" />

          <div class="home-qty-states">
            <button id="${index}" class="btn add-to-cart-btn home-state">
              <img src="./assets/images/icon-add-to-cart.svg" />
              Add to Cart
            </button>

            <div class="btn qty-state">
              <button class="btn-qty">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" fill="none" viewBox="0 0 10 2"><path fill="var(--icon-clr, #fff)" d="M0 .375h10v1.25H0V.375Z"/></svg>
              </button>

              <span id="currentProductCount">1</span>

              <button class="btn-qty">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10"><path fill="var(--icon-clr, #fff)" d="M10 4.375H5.625V0h-1.25v4.375H0v1.25h4.375V10h1.25V5.625H10v-1.25Z"/></svg>
              </button>
            </div>
          </div>

          <p class="product-category">${category}</p>
          <h3 class="product-name">${name}</h3>
          <p class="product-price">$${price.toFixed(2)}</p>
        </div>
    `;
  });
  // 所有产品渲染完成后再获取按钮
  const addToCartBtns = document.querySelectorAll(".add-to-cart-btn");
  console.log(addToCartBtns);
};

办法2：用事件委托（更推荐） #

如果之后还有动态添加产品的需求，事件委托不需要每次重新获取元素，直接监听父容器的点击事件：

const dessertCartContainer = document.getElementById("desserts-card-container");

// 给父容器绑定点击事件，通过事件冒泡判断点击的是添加按钮
dessertCartContainer.addEventListener("click", (e) => {
  const addBtn = e.target.closest(".add-to-cart-btn");
  if (addBtn) {
    // 这里写添加到购物车的逻辑
    console.log("点击了添加按钮，产品ID：", addBtn.id);
  }
});

fetch("./data.json")
  .then((response) => response.json())
  .then((data) => showProducts(data));

// showProducts函数保持原样
const showProducts = (productsArr) => {
  productsArr.forEach(({ image, category, name, price }, index) => {
    dessertCartContainer.innerHTML += `
        <div>
          <img src="${image.mobile}" class="product-img" />

          <div class="home-qty-states">
            <button id="${index}" class="btn add-to-cart-btn home-state">
              <img src="./assets/images/icon-add-to-cart.svg" />
              Add to Cart
            </button>

            <div class="btn qty-state">
              <button class="btn-qty">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" fill="none" viewBox="0 0 10 2"><path fill="var(--icon-clr, #fff)" d="M0 .375h10v1.25H0V.375Z"/></svg>
              </button>

              <span id="currentProductCount">1</span>

              <button class="btn-qty">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10"><path fill="var(--icon-clr, #fff)" d="M10 4.375H5.625V0h-1.25v4.375H0v1.25h4.375V10h1.25V5.625H10v-1.25Z"/></svg>
              </button>
            </div>
          </div>

          <p class="product-category">${category}</p>
          <h3 class="product-name">${name}</h3>
          <p class="product-price">$${price.toFixed(2)}</p>
        </div>
    `;
  });
};

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