Shopify产品页：如何在输入元素加载后获取值并添加类？

你遇到的问题确实是动态元素加载时机导致的：sample-swatch是静态写入HTML的，脚本运行时它已经存在，所以能正常获取；但box-mat相关的单选按钮是页面加载后（比如通过Shopify的产品选项渲染逻辑、AJAX请求）动态生成的，你的脚本执行时这些元素还没被添加到DOM里，自然找不到。

下面给你几种可靠的解决方案，按推荐程度排序：

1. 使用MutationObserver监听DOM变化（最可靠，适配所有动态生成场景） #

这种方法可以实时监听DOM的变化，一旦目标元素被添加到页面中，就自动执行你的逻辑，完美解决动态元素的问题：

// 先找到产品选项所在的父容器（根据页面实际DOM结构调整，比如.product-form或者.variant-options）
const targetContainer = document.querySelector('.product-form');

if (targetContainer) {
  // 创建MutationObserver实例，监听子元素变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 检查是否有新元素被添加
      if (mutation.addedNodes.length) {
        // 获取所有box-mat类的单选按钮
        const boxMatInputs = document.querySelectorAll('.box-mat');
        boxMatInputs.forEach((input) => {
          // 避免重复添加类
          if (!input.classList.contains('your-custom-class')) {
            input.classList.add('your-custom-class');
            // 获取并打印元素值
            console.log('单选按钮值:', input.value);
          }
        });
      }
    });
  });

  // 开始监听容器的子元素变化（包括子树）
  observer.observe(targetContainer, { childList: true, subtree: true });
}

2. 监听Shopify主题的自定义事件（适配Shopify场景） #

很多Shopify主题在产品选项加载/切换完成后，会触发自定义事件（比如product:option:change或variant:change），你可以利用这些事件来触发你的逻辑：

// 监听产品选项变化事件
document.addEventListener('product:option:change', () => {
  // 事件触发时，动态元素已经渲染完成
  const boxMatInputs = document.querySelectorAll('.box-mat');
  boxMatInputs.forEach((input) => {
    input.classList.add('your-custom-class');
    console.log('单选按钮值:', input.value);
  });
});

注：不同主题的事件名称可能不同，你可以在控制台输入document.addEventListener('click', (e) => console.log(e))，然后切换产品选项，查看触发的事件名称。

3. 等待DOM完全加载（仅适用于静态渲染的动态元素） #

如果box-mat元素是在页面初始渲染时延迟加载（而非AJAX动态加载），可以用DOMContentLoaded事件等待DOM完全加载后再执行代码：

document.addEventListener('DOMContentLoaded', () => {
  const boxMatInputs = document.querySelectorAll('.box-mat');
  boxMatInputs.forEach((input) => {
    input.classList.add('your-custom-class');
    console.log('单选按钮值:', input.value);
  });
});

注意：如果元素是AJAX加载的，这种方法可能还是会失效，因为DOMContentLoaded只等待初始DOM加载完成，不等待AJAX请求。

小提示 #

• 你可以先在浏览器控制台执行document.querySelectorAll('.box-mat')，确认选择器是否正确，避免因为类名拼写错误导致找不到元素。
• 如果需要给单选按钮添加点击事件，也可以把事件绑定逻辑放在上述回调中，确保元素存在时再绑定。

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