URL带哈希值时document.querySelectorAll("a")返回空节点列表问题

首先要纠正一个误解：document.querySelectorAll("a")并没有返回空节点列表——你的测试代码里<p id="p1">显示了"null "，说明forEach循环确实执行了，只是其中某个<a>元素的href属性值为null，让你误以为节点列表为空。

问题根源 #

问题出在你那段依赖哈希值的额外脚本中，结合页面带哈希时的初始化逻辑，有以下几个关键问题：

• 哈希初始化时机错误：你把哈希变量x的初始化代码写在了$(document).ready()外部，这会导致代码在DOM完全加载前就运行。如果此时页面里的<a>标签还未被解析完成，后续的href修改逻辑就会出现异常。
• href属性被错误覆盖：在折叠面板的点击回调里，你最后直接强制把#heading1的href设置为window.x，如果页面初始哈希格式不符合预期（比如不是#_开头），或者未触发点击但其他逻辑意外修改了href，就可能导致某个<a>的href变成无效值甚至null。
• 脚本执行顺序冲突：你有两个$(document).ready()回调，它们的执行顺序是按代码在页面中出现的先后顺序来的。如果处理哈希的脚本先执行，会提前修改<a>的href属性，导致后续拼接window.c的脚本拿到异常的href值（比如null）。

修复方案 #

针对这些问题，你可以按以下步骤调整代码：

1. 统一DOM加载后的逻辑执行

把哈希初始化的代码移到$(document).ready()内部，避免DOM未加载完成时的变量异常：

$(document).ready(function(){
    // 初始化哈希变量，用let避免全局污染
    let x;
    if(window.location.hash) {
        x = window.location.hash;
    } else {
        x = "#_";
    }

    // 折叠面板点击逻辑
    $("#heading1").click(function(){
        $("#section1").toggle();
        
        // 优化哈希值修改逻辑
        if(x.includes("1")){
            x = x.replace("1", "");
        } else {
            x = x.concat("1");
        }
        // 确保哈希格式统一，避免重复的#_
        x = "#_" + x.replace(/#_/g, "");
        
        // 更新所有a标签的href
        $('a[href]').each(function(){
            let $this = $(this);
            let oldUrl = $this.attr("href");
            // 精准替换目标内容，避免误改其他字符
            oldUrl = oldUrl.replace(/#_/g, "").replace(/1/g, "");
            let newUrl = oldUrl + x;
            $this.attr("href", newUrl);
        });
        // 单独设置heading1的href，确保格式有效
        $("#heading1").attr("href", x);
    });

    // 拼接window.c的逻辑，移到这里统一管理执行顺序
    const links = document.querySelectorAll("a");
    links.forEach(function(item){
        const href = item.getAttribute("href");
        // 先判断href是否存在，避免null拼接报错
        if(href) {
            item.setAttribute("href", href.concat(window.c));
            // 测试用代码，避免覆盖原有内容
            document.getElementById("p1").innerHTML += href + " ";
        } else {
            console.warn("发现一个无href属性的a标签:", item);
        }
    });
});

2. 增加空值判断与变量声明规范

• 在拼接window.c的逻辑中，先检查href是否存在，避免null.concat()导致的脚本异常。
• 用let或const声明所有变量，避免全局变量污染导致的意外覆盖。

为什么Chrome中会出现这个现象？ #

Chrome对DOM加载和哈希锚点的处理比较严格：当页面URL带有哈希时，浏览器会立即尝试跳转到对应的锚点元素，这会轻微改变DOM解析的优先级，但核心问题还是你的脚本逻辑存在变量污染和执行顺序的冲突，并非querySelectorAll本身失效。

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