使用DOM操作修改段落时报TypeError: p.forEach is not a function错误求解

问题根源 #

• document.querySelector() 仅返回第一个匹配指定选择器的DOM元素，无匹配时返回null，它是单个元素对象而非可遍历的集合，本身没有forEach方法，调用自然会触发类型错误。
• 要选中所有类名为myP的元素，需要使用document.querySelectorAll()，该方法返回包含所有匹配元素的NodeList集合，现代浏览器中NodeList原生支持forEach遍历。

修复方案 #

仅需要修改获取p元素的代码行即可：

document.querySelector("#myBtn").onclick = function () {
  console.log("Clicked");
  const h1 = document.querySelector("#myH1");
  const underline = document.createElement("u");
  underline.innerText = "Hey bro.";
  h1.innerText = "";
  h1.append(underline);

  // 替换原有querySelector为querySelectorAll
  const p = document.querySelectorAll(".myP");
  p.forEach((element) => (element.innerText = "Thank You!"));

  const btn = document.querySelector("button");
  btn.remove();
};

兼容说明 #

如果需要适配IE11等老旧浏览器，NodeList不自带forEach方法，可以转成普通数组后再遍历：

const pArr = Array.from(document.querySelectorAll(".myP"));
// 或者用const pArr = [].slice.call(document.querySelectorAll(".myP"));
pArr.forEach(element => element.innerText = "Thank You!");

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