调用getElementsByClassName找不到元素JS报错，Shopify主题脚本如何优化？

执行异常原因 #

当页面不存在对应类名的元素时，document.getElementsByClassName() 会返回空的HTMLCollection集合，此时取索引[0]得到的是undefined，尝试访问undefined.innerHTML会直接抛出未捕获的类型错误。JavaScript运行时遇到未捕获的错误会直接终止后续所有代码的执行，所以第一行代码执行报错后，第二行代码根本没有运行的机会，这就是你交换两行代码顺序后出现相反效果的原因。

多场景兼容实现方案 #

你可以在操作DOM前先判断元素是否存在，只有元素存在时才执行内容替换，避免报错中断逻辑。有两种常用实现方式：

方式1：数组遍历（后续新增类名更方便） #

把所有可能的目标类名放进数组统一遍历，后续新增兼容类名直接修改数组即可，代码更简洁：

// 所有需要兼容的目标类名列表，可随时扩展
const targetClasses = ['my__div', 'my--div']

for (const cls of targetClasses) {
  const targetEl = document.getElementsByClassName(cls)[0]
  // 仅当元素存在时执行替换
  if (targetEl) {
    targetEl.innerHTML = 'new content'
    // 如果只需要替换第一个匹配到的元素，放开下面的break注释即可
    // break
  }
}

方式2：独立if判断（适合少量类名场景） #

如果兼容的类名数量很少，也可以单独写if语句逐类判断：

const firstEl = document.getElementsByClassName('my__div')[0]
if (firstEl) {
  firstEl.innerHTML = 'new content'
}

const secondEl = document.getElementsByClassName('my--div')[0]
if (secondEl) {
  secondEl.innerHTML = 'new content'
}

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