如何遍历HTMLCollectionOf<Element>？Chrome扩展获取价格遇阻

以下是几种常见原因及对应解决方法：

• 元素未完成异步加载
  电商平台的商品价格多为异步渲染，执行获取元素的代码时，目标元素可能还未被添加到DOM中。可以通过延迟执行或DOM监听处理：
  延迟执行示例：

  setTimeout(() => {
    const pricesArray = document.getElementsByClassName('css-1eegk7w');
    const priceList = Array.from(pricesArray).map(item => item.innerText);
    console.log(priceList);
  }, 2000); // 可根据页面加载速度调整延迟时间
  

  精准DOM监听示例：

  const observer = new MutationObserver((mutations) => {
    const pricesArray = document.getElementsByClassName('css-1eegk7w');
    if (pricesArray.length > 0) {
      const priceList = Array.from(pricesArray).map(item => item.innerText);
      console.log(priceList);
      observer.disconnect(); // 找到元素后停止监听
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

• 目标元素在iframe内
  如果价格元素嵌套在iframe中，直接通过document无法获取，需要先拿到iframe的内容文档：

  const targetIframe = document.querySelector('iframe');
  targetIframe.onload = () => {
    const pricesArray = targetIframe.contentDocument.getElementsByClassName('css-1eegk7w');
    const priceList = Array.from(pricesArray).map(item => item.innerText);
    console.log(priceList);
  };
  

• 类名是动态生成的
  不少电商会使用带随机后缀的动态类名，刷新页面后css-1eegk7w可能失效。右键检查元素确认当前类名，或改用更稳定的选择器，比如结合标签和属性：

  // 假设价格元素是span标签且包含价格相关属性
  const pricesArray = document.querySelectorAll('span[data-price]');
  

• 扩展脚本执行时机错误
  确保脚本在页面完全加载后运行，在manifest.json中明确设置：

  {
    "content_scripts": [
      {
        "matches": ["https://目标电商域名/*"],
        "js": ["content.js"],
        "run_at": "document_idle"
      }
    ]
  }
  

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