如何使用 javascript 提取 <main> 元素中的所有 href

Question

我正在尝试使用javascript 创建一个数组，该数组包含main 元素 中的所有href。现在我不是程序员，但我想我会尝试以两种方式中的任何一种来处理它：

a) 隔离主要元素 (document.getElementsByTagName("main")) 然后尝试从此对象中提取所有 href。

b) 创建页面上所有 href 的数组 (document.links)，然后检查每个 href 是否有 main 作为父节点。

到目前为止，我还没有找到两种方法的解决方案。任何人都可以帮助我创建一个包含 main 中所有 href 的数组的代码片段吗？非常感谢。我已经花了几个小时自己弄明白了 xl

示例HTML：

<main>
 <div id="content">
  <div class="classA">
   <a href="/pagePathA/"></a>
  </div>
  <div class="classB">
   <a href="/pagePathB/"></a>
  </div>
 </div>
</main>

Answer 1

使用querySelectorAll

let hrefs = [...document.querySelectorAll('main a[href]')].map(({href}) => href);
console.log(hrefs);

<main>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <div>
    <a href="#3">3</a>
  </div>
</main>

如果你只想要 children 的主要部分，而不是所有的后代

let hrefs = [...document.querySelectorAll('main>a[href]')].map(({href}) => href);
console.log(hrefs);

<main>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <div>
    <a href="#3">3</a>
  </div>
</main>

如何使用 javascript 提取 <main> 元素中的所有 href

How can I extract all href's within the <main> element using javascript

javascript

arrays

href