将getElementById替换为getElementsByTagName后keydown事件不生效如何解决

问题根因 #

• document.getElementsByTagName() 方法返回的是包含所有匹配标签名的DOM元素的类数组集合（HTMLCollection），不是单个DOM元素，无法直接调用.style属性修改样式
• 你代码里直接对返回的集合操作，自然不会生效，同时控制台会抛出属性未定义的报错

正确实现方案 #

你只需要从返回的集合中按索引取到对应的单个<p>元素即可，如果你页面只有这一个<p>元素，取索引0即可：

<p>
<input type="text" id="demo" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
</p>

<script>
function keydownFunction() {
  // 取匹配到的第一个p元素
  document.getElementsByTagName("p")[0].style.backgroundColor = "red";
}

function keyupFunction() {
  document.getElementsByTagName("p")[0].style.backgroundColor = "green";
}
</script>

如果页面有多个<p>元素，你可以通过遍历集合的方式批量修改所有匹配元素的样式：

function keydownFunction() {
  const pList = document.getElementsByTagName("p");
  for(let i = 0; i < pList.length; i++){
    pList[i].style.backgroundColor = "red";
  }
}

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