如何<span>在使用 JavaScript 的鏈接的 HTMLCollection 內的文本中<a>使用 select 文本？</a></span>

Question

我正在嘗試為一個有趣的個人項目抓取一些數據，而且我是 JS 新手。 我正在嘗試從 HTMLCollection 中獲取一組團隊名稱（使用 Chrome 開發工具）。 如果有更簡單的方法，我願意接受。 至今：

let vMidCollection = document.getElementsByClassName("v-mid");
vMidCollection[0]

問題：每個<a></a>包含一個<span></span>但我需要一組團隊名稱（下划線）。 提前致謝。

Answer 1

您可以使用querySelectorAll嘗試此操作

 const teamNames = [...document.querySelectorAll('.v-mid span.teamName')].map(e => e.textContent) console.log(teamNames)

 <a class="v-mid"> <div> <span class="teamName">Test </span> </div> </a> <a class="v-mid"> <div> <span class="teamName">Test 1</span> </div> </a> <a class="v-mid"> <div> <span class="teamName">Test 2</span> </div> </a>

Answer 2

您可以使用以下

 let vMidCollection = document.getElementsByClassName("v-mid"); team_names = [] Array.from(vMidCollection).forEach( (elem) => {team_names.push(elem.querySelector(".teamName").innerText)}) console.log(team_names)

 <a class="v-mid"> <div> Stuff </div> <span class="teamName">Tam 1 </span> </a> <a class="v-mid"> <div> Stuff </div> <span class="teamName">Team 2</span> </a> <a class="v-mid"> <div> Stuff </div> <span class="teamName">Team3</span> </a>

它找到vMidCollection中具有class="teamname"的每個元素，並將其文本附加到team_names