如何在<main>使用 javascript 的元素</main>

Question

我正在嘗試使用 javascript創建一個包含主元素內所有 href 的數組。 現在我不是程序員，但我想我會嘗試以兩種方式中的任何一種來處理它：

a) 隔離主元素(document.getElementsByTagName("main"))，然后嘗試從 object 中提取所有 href。

b）在頁面（document.links）上創建一個所有href的數組，然后檢查每個href是否有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>

如果你只想要主要的孩子，而不是所有的后代

 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>