JavaScript如何通过标签名获取元素？给nav子元素绑悬停事件报错如何解决

代码存在的问题 #

• DOM获取时机错误
  你当前的JS代码执行时，页面中的<nav>元素还没有被浏览器渲染完成，document.getElementsByTagName("nav")返回的是空的HTMLCollection集合，此时访问navigation[0]属于读取空值的属性，浏览器就会抛出相关错误。你看到的"navigation未定义"提示大概率是后续报错连带的误导性提示，核心原因是nav元素还没加载就被读取。如果你的脚本放在<head>标签内，没有加defer属性或者包裹在DOMContentLoaded事件回调里，必然会触发这个问题。另外要先确认你的页面中确实存在至少一个<nav>标签。
• 变量声明不规范
  代码里的elements和循环变量element都没有用let/const声明，会被默认创建为全局变量，严格模式下会直接抛出未声明错误。
• 遍历方式错误
  navigation[0].children返回的是HTMLCollection类数组对象，for...in循环会遍历到对象的所有可枚举属性，包括非索引的内置属性（比如length、item方法等），这些属性不是DOM元素，调用addEventListener方法时会直接报错。
• 定时器指向隐患（潜在问题）
  虽然不是你当前报错的直接原因，但部分旧浏览器环境下setTimeout回调里的event.target可能出现指向异常，最好提前存储DOM元素的引用避免问题。

修复后的完整代码 #

// 等待DOM全部渲染完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const navigation = document.getElementsByTagName("nav");
  // 提前判断是否获取到nav元素，避免空值报错
  if (!navigation.length) return;
  const elements = navigation[0].children;

  // 用for...of遍历仅获取DOM元素节点
  for (const element of elements) {
    element.addEventListener("mouseenter", function(event) {
      const target = event.target;
      target.style.color = "#ffbf00";
      target.style.textShadow = "0px 0px 20px #ffbf00";
      setTimeout(function() {
        target.style.color = "";
        target.style.textShadow = "0 0 5px #a50068";
      }, 500);
    }, false);
  }
})

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