JavaScript代码故障排查：querySelector问题与事件绑定无响应

第一个代码的问题 #

你这段代码的核心问题是：document.getElementsByClassName("Links")[0].querySelector("ul").querySelector("li").querySelector("a") 返回的是单个<a>元素，不是元素集合。你用for...in去遍历单个DOM元素，会遍历出它的所有内置属性（比如tagName、className这些），这些属性不是DOM元素，自然不能给它们绑定mouseenter事件，所以会报错。

如果只需要给这单个<a>绑定事件，正确写法：

var link = document.getElementsByClassName("Links")[0].querySelector("ul li a");
link.onmouseenter = function(){
  console.log("Test");
};

如果目标是给<ul>下所有<li>里的<a>绑定事件，应该用querySelectorAll获取元素集合，再用for...of遍历（避免for...in遍历非元素属性的问题）：

var links = document.getElementsByClassName("Links")[0].querySelector("ul").querySelectorAll("li a");
for (let link of links){
  link.onmouseenter = function(){
    console.log("Test");
  };
}

第二个代码的问题 #

你定义了main函数，但从来没有调用它，所以里面的代码根本没执行，控制台当然没输出。另外还要注意：如果JS代码写在<head>里或DOM元素加载前执行，会找不到.Links元素，导致后续代码失效。

解决方法：调用main函数，同时确保DOM加载完成后执行：

function main(){
    const link = document.querySelector(".Links ul li a");
    if(link){ // 先判断元素是否存在，避免找不到元素时报错
        link.onmouseenter = function(){
            console.log("Test")
        }
    }
}

// 确保DOM加载完成后执行函数
document.addEventListener('DOMContentLoaded', main);

或者直接把JS代码放在HTML的<body>末尾，这样DOM元素已经加载完成，直接执行代码即可。

另外推荐用querySelector代替链式的getElementsByClassName+querySelector，写法更简洁：document.querySelector(".Links ul li a") 和你原来的代码效果完全一致。

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