遍历有序列表li元素时href属性返回null，请求排查原因

嘿，我来帮你梳理下这个问题！这种情况我在开发中碰到过好几次，大概率是下面几个原因导致的，你可以逐一排查：

• 你误把a标签的href当成了li的属性
  很多时候我们会把链接放在li内部的a标签里，比如HTML结构是这样的：

  `

  1. 链接1
  2. 链接2

  `

  这时候li元素本身根本没有href属性，你直接获取li.href自然会返回null。正确的做法是先找到li内部的a标签，再获取它的href：

  const listItems = document.querySelectorAll('ol li');
  listItems.forEach(item => {
    const link = item.querySelector('a');
    if (link) {
      console.log(link.href); // 这里就能拿到正确的URL了
    }
  });
  

• 用了错误的属性获取方法
  如果你确实给li元素加了自定义的href属性（比如<li href="https://example.com">...</li>），那要注意：普通元素（非a/area/link这类链接元素）的.href是DOM内置属性，默认值为null。你需要用getAttribute('href')来获取自定义属性的实际值：

  const listItems = document.querySelectorAll('ol li');
  listItems.forEach(item => {
    console.log(item.getAttribute('href')); // 正确获取自定义href属性
  });
  

• 代码执行时机不对，DOM还没加载完成
  如果你的JS代码在页面DOM还没完全渲染时就运行了，那获取到的li元素可能还没被解析，属性自然也拿不到。解决办法是把代码放在DOMContentLoaded事件回调里，或者把script标签放在body标签的最后：

  document.addEventListener('DOMContentLoaded', () => {
    // 在这里执行遍历li的代码
    const listItems = document.querySelectorAll('ol li');
    listItems.forEach(item => {
      // 你的获取逻辑
    });
  });
  

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