JS使用getElementsByTagName无法同时给p、h4两类元素批量添加CSS类？

问题原因 #

1. document.getElementsByTagName()返回的是动态的HTMLCollection类数组对象，不是普通数组
2. 你使用for...in遍历该类数组时，除了索引对应的DOM元素，还会遍历到集合自带的length属性、item()方法等非元素值，调用这些值的classList.add方法时会直接抛出JS异常，中断代码执行，因此排在数组后面的元素类型完全没有执行机会。该问题和多次调用document方法无关。

可行解决方法 #

方案1（推荐）：使用querySelectorAll一次性选择所有目标元素 #

该方法代码最简洁，不需要拼接数组和双层循环，直接通过逗号分隔的标签选择器匹配所有需要的元素，返回的静态NodeList原生支持forEach遍历：

function styleTxt() {
  // 要新增其他标签直接在选择器里用逗号分隔即可，比如 'p, h4, h3, span'
  document.querySelectorAll('p, h4').forEach(el => {
    el.classList.add('italic')
  })
}
styleTxt()

方案2：修改原有代码的循环逻辑 #

如果需要保留原有getElementsByTagName的写法，只要把内层for...in遍历替换为基于索引的普通for循环，避免遍历到非元素属性即可：

function styleTxt() {
  let h4Elems = document.getElementsByTagName("H4");
  let pElems = document.getElementsByTagName("P");
  const elemArray = [pElems, h4Elems];

  for (let eachElem of elemArray) { // 外层遍历数组用for of更安全
    for (let i = 0; i < eachElem.length; i++) {
      eachElem[i].classList.add("italic");
    }
  }
}
styleTxt()

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