使用JS为li内a标签添加visited属性实现已访问链接打勾功能失效问题排查

![页面结构示例]
如上图所示，我正尝试给网页内li标签下的一批已访问链接旁添加对勾（✓）标记。
我用来给<a>标签插入visited标记的JS代码放在页脚位置，理论上是等链接渲染完成后再执行，但完全没生效——HTML结构里根本没有生成对应的自定义属性。

现有代码 #

JS代码：

localStorage.setItem('visited-'+window.location.pathname,true);
var links = document.querySelectorAll('#the-content > ul > li > a');
for (i=0;i<links.length;i++) {   
  var link = links[i];
  if (link.host == window.location.host && localStorage.getItem('visited-' + link.pathname + '/')) {
    link.dataset.visited=true;
  }
}

CSS代码已经验证可正常工作：手动给<a>标签添加对应属性时，样式会正常生效：

article .the-content a[data-visited] {
  border-bottom: 1px dashed orange;
}

article .the-content a[data-visited]:after {
  content: ' ✓';
}

现在需要定位JS失效的原因，给出解决方案。

按优先级从高到低排查，基本能覆盖所有失效场景：

• 存储key不匹配是第一类高频bug
  你写入localStorage时，生成的key是visited-拼接当前页面路径，比如当前路径为/guide/html，对应存储key就是visited-/guide/html；但读取链接的存储值时，你在路径末尾硬加了斜杠，实际去找的是visited-/guide/html/。两者key完全对不上，除非所有路径天生带末尾斜杠，否则永远读不到存储值，自然不会给a标签添加data-visited属性。
  解决方法是统一key生成规则，无论存还是读，都把路径末尾多余的斜杠去除，避免不一致。
• 选择器失效导致选不到元素
  你写的选择器#the-content > ul > li > a是直接子代选择器，要求#the-content的下一级必须是ul，再下一级是li，再下一级才是a。但你写CSS时用的是article .the-content a，说明实际DOM结构中，#the-content和ul之间大概率还嵌套了其他div、section类标签，直接子代选择器遇到中间嵌套就会失效，最终选出来的links长度为0，循环逻辑根本不会执行。
  排查时直接打开浏览器控制台，输入document.querySelectorAll('#the-content > ul > li > a')，如果返回的节点列表长度为0，就把选择器里的>去掉，改成document.querySelectorAll('#the-content ul li a')先确认能正常选中目标元素。
• host判断条件拦截了有效逻辑
  你判断link.host == window.location.host时，很容易被域名前缀差异卡住：比如当前页面是通过带www的域名打开的，但链接的href写的是不带www的裸域名，两者host值不相等，后续逻辑会被直接跳过。
• JS执行时机早于元素渲染
  如果页面里的链接是异步渲染的（比如ajax动态加载、前端框架渲染的内容），你把JS放在页脚执行时，这些a标签还没插入DOM结构，自然无法被选中。

// 统一路径处理规则：去掉末尾多余斜杠，避免存储key不匹配
function normalizePath(pathStr) {
  return pathStr.replace(/\/$/, '');
}
// 写入当前页面的已访问标记
const currentPath = normalizePath(window.location.pathname);
localStorage.setItem(`visited-${currentPath}`, true);
// 取消硬限制的直接子代选择器，适配常见的DOM嵌套结构
const targetLinks = document.querySelectorAll('#the-content ul li a');
const currentSiteHost = window.location.host;
targetLinks.forEach(link => {
  // 跳过外站链接
  if (link.host !== currentSiteHost) return;
  const linkPath = normalizePath(link.pathname);
  // 匹配已访问的存储值，添加对应属性
  if (localStorage.getItem(`visited-${linkPath}`)) {
    link.dataset.visited = true;
  }
});

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