运行HTML代码时出现Cannot read property 'style' of undefined、无法访问div属性报错如何解决？

• document.getElementsByClassName() 接口返回的是HTMLCollection类数组集合，即使页面只有一个匹配类名的元素，也需要通过下标[0]取出对应DOM节点
• 原代码错误为集合追加了不存在的.value属性取值，得到的结果是undefined，后续访问undefined.style就触发了属性读取错误

方案1：取下标获取匹配元素 #

修改Load函数的元素获取逻辑，从返回的类数组中取出第一个匹配节点：

function Load() {
  let loadingEl = document.getElementsByClassName('spinner-grow')[0];
  loadingEl.style.display = 'block';
}

方案2：使用querySelector直接获取单个元素（更推荐） #

querySelector传入CSS选择器，会直接返回第一个匹配的DOM节点，不需要额外取下标：

function Load() {
  let loadingEl = document.querySelector('.spinner-grow');
  loadingEl.style.display = 'block';
}

增加元素非空判断，避免页面不存在对应元素时抛出新的错误：

function Load() {
  let loadingEl = document.querySelector('.spinner-grow');
  if (loadingEl) {
    loadingEl.style.display = 'block';
  }
}

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