JS调用setAttribute报undefined错误的原因及修复方法

代码里存在两处问题，共同触发了这个报错：

• getElementsByClassName的入参写错了：这个API接收的参数是不带选择器前缀的纯类名字符串，你传入的是.myclass，会去查找class值为.myclass的元素，根本匹配不到你写了class="myclass"的目标节点，最终返回空的元素集合。
• 方法调用的主体错了：getElementsByClassName返回值是HTMLCollection类型的类数组集合，不是单个DOM节点，集合本身不存在setAttribute方法，直接调用自然会抛出类型错误。

额外说明：就算修复了上面两个问题，直接调用setAttribute('width','100%')也无法给普通div这类元素改宽度——width是img、input、table等元素的原生属性，普通块元素的宽度需要修改内联style才能生效。

function changewidth() {
  // 去掉类名前的.，正确获取所有带myclass类的元素集合
  let mynodes = document.getElementsByClassName('myclass');
  // 遍历集合里的每一个DOM节点
  for (const node of mynodes) {
    // 修改节点的内联样式宽度为100%
    node.style.width = '100%';
  }
}

如果页面上只有一个带myclass类的元素，也可以直接取集合第一个元素操作，不需要遍历：mynodes[0].style.width = '100%'。

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