如何<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