页面加载时移除链接列表中href属性末尾两位字符的实现

原代码问题说明 #

document.getElementsByClassName('table-contents-link')返回的是包含所有目标元素的HTMLCollection（元素集合），而非单个DOM元素，因此不能直接访问.href属性，必须遍历集合里的每个元素进行处理。

完整实现代码 #

方式一：使用for循环遍历（兼容所有浏览器）

// 等待DOM完全加载后执行操作
window.addEventListener('DOMContentLoaded', function() {
  const targetLinks = document.getElementsByClassName('table-contents-link');
  // 遍历元素集合
  for (let i = 0; i < targetLinks.length; i++) {
    const currentLink = targetLinks[i];
    // 截取href值，移除最后两位字符
    currentLink.href = currentLink.href.slice(0, -2);
  }
});

方式二：转为数组后用forEach遍历（更简洁）

window.addEventListener('DOMContentLoaded', function() {
  // 将HTMLCollection转为数组
  const targetLinks = Array.from(document.getElementsByClassName('table-contents-link'));
  targetLinks.forEach(link => {
    // 替换href属性值，去掉最后两位
    link.href = link.href.slice(0, -2);
  });
});

关键细节 #

• DOMContentLoaded事件确保在DOM结构完全加载完成后再执行操作，避免因元素未渲染导致无法获取的问题。
• slice(0, -2)用于截取字符串从开头到倒数第三位的部分，直接移除最后两位字符，效果等同于substr(0, currentLink.href.length - 2)。

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