使用原生JavaScript（Vanilla JS）根据链接href执行函数的求助

我来帮你搞定这个问题，你的代码里有两个关键问题需要调整，都是原生JS里很常见的小坑：

问题1：DOM元素获取时机不对 #

你现在是在全局作用域直接执行document.querySelector('a').getAttribute('href')，如果这段脚本放在页面的<head>标签里，浏览器还没解析到<a>元素，document.querySelector('a')会返回null，这时候调用getAttribute就会直接报错。

问题2：条件判断用了赋值运算符而非比较运算符 #

你写的if (href = "example.html")里的=是赋值运算符，它会把字符串"example.html"赋值给href，然后这个表达式的结果就是"example.html"，会被当成true来执行，不管原来的href是什么。正确的做法是用严格相等运算符===（推荐，避免类型隐式转换）或者抽象相等==来做比较。

修正后的代码方案（两种可选） #

方案1：脚本放在<head>里，用window.onload包裹所有逻辑

window.onload = function(){
  // 把获取href的操作放到页面加载完成后执行，确保能拿到<a>元素
  var href = document.querySelector('a').getAttribute('href');
  // 用===做严格相等判断
  if (href === "example.html"){
    /* 这里写你要执行的代码 */
    console.log("匹配到目标链接啦");
  }
}

方案2：把脚本放到页面底部（</body>标签之前）

这种情况下不需要window.onload，因为此时DOM已经解析完成：

// 直接获取元素，因为此时<a>已经被浏览器渲染出来
var href = document.querySelector('a').getAttribute('href');
if (href === "example.html"){
  /* 执行你的逻辑 */
  console.log("匹配到目标链接啦");
}

额外小提示 #

• 如果页面里有多个<a>元素，document.querySelector('a')只会获取第一个匹配的元素，如果你要针对特定的a标签，可以给它加id或者class，比如document.querySelector('#target-link')来精准定位。
• 严格相等===会同时比较值和类型，比如如果href是"Example.html"（大小写不同）或者"/example.html"（带路径），都不会匹配，这符合我们通常的精确判断需求；如果需要忽略大小写，可以用href.toLowerCase() === "example.html"。

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