如何用JavaScript的querySelector获取嵌套列表所有链接的href值？

API 探路者

2026-8-26

如何获取嵌套导航列表中所有链接的href值？

问题场景

你有如下嵌套导航的HTML结构：

<div class="nav">
    <ul>
        <li><a href="#number-one">Number 1</a></li>
        <li><a href="#number-two">Number 2</a></li>
        <ul>
            <li><a href="#number-three">Number 3</a></li>
            <li><a href="#number-four">Number 4</a></li>
        </ul>
        <li><a href="#number-five">Number 5</a></li>
    </ul>
</div>

尝试用 const getNav = document.querySelector('.nav li'); 仅能获取顶层的链接，想知道如何获取所有嵌套列表里的链接href值。

解决方法

方法1：直接选择所有后代a标签（最简便）

所有目标链接都是.nav元素的后代，直接用后代选择器选中所有a标签，再提取href即可。注意要用querySelectorAll（返回所有匹配元素），而不是querySelector（仅返回第一个匹配元素）：

// 获取.nav下所有的a标签
const allNavLinks = document.querySelectorAll('.nav a');
// 提取所有href值到数组
const allHrefs = Array.from(allNavLinks).map(link => link.href);
console.log(allHrefs);
// 输出结果：会包含带当前页面域名的完整URL，如 "http://当前域名/#number-one" 这类格式

方法2：先选中所有li再提取链接

如果需要先定位li元素再处理链接，同样用querySelectorAll选中.nav下所有层级的li，再遍历每个li提取内部的a标签href：

const allNavLi = document.querySelectorAll('.nav li');
const allHrefs = [];
allNavLi.forEach(li => {
  const link = li.querySelector('a');
  if (link) {
    allHrefs.push(link.href);
  }
});
console.log(allHrefs);