如何解决‘TypeError: document.getElementByName is not a function’及JS元素赋值疑问

嘿，作为JS新手碰到这种DOM操作的小坑太正常啦！我来帮你拆解下为啥只有getElementById能生效，其他方法不行～

首先，你犯了个容易忽略的拼写错误！ #

你写的document.getElementByName和document.getElementByTagName都少了末尾的s！正确的方法名应该是：

• document.getElementsByName()（注意Elements的s）
• document.getElementsByTagName()（同样注意Elements的s）

这可不是小问题，方法名写错了浏览器根本识别不了，自然不会生效。

其次，这些方法的返回值完全不同！ #

这才是核心原因：

• getElementById()：因为页面里的id是唯一的，所以它直接返回单个DOM元素对象，你可以直接调用.innerHTML修改内容，这就是它能生效的原因。
• getElementsByName() 和 getElementsByTagName()：这两个方法返回的是HTMLCollection（元素集合）——简单说就是一堆元素的列表，不是单个元素。你直接给整个集合用.innerHTML当然没用，得先从集合里取出具体的元素才行。

修正后的代码示例 #

把拼写改对，再通过索引获取集合里的元素，就能正常工作了：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  // 这个原本就正确，直接修改单个元素
  document.getElementById("myid").innerHTML = 'hey';
  
  // 修正拼写 + 取集合里第一个匹配的元素
  document.getElementsByName("myname")[0].innerHTML = 'Whats';
  
  // 修正拼写 + 取集合里第一个p标签
  document.getElementsByTagName("p")[0].innerHTML = 'up?';
}
</script>
</head>
<body>
<p id="myid">初始文本1</p>
<p name="myname">初始文本2</p>
<p>初始文本3</p>
<button onclick="myFunction()">点击修改文本</button>
</body>
</html>

额外小提示 #

如果页面里有多个匹配name或标签名的元素，你可以遍历集合来修改所有元素：

// 遍历所有p标签，逐个修改内容
const allParagraphs = document.getElementsByTagName("p");
for (let i = 0; i < allParagraphs.length; i++) {
  allParagraphs[i].innerHTML = `这是修改后的第${i+1}个p标签`;
}

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