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

Question

我正在尝试为一个有趣的个人项目抓取一些数据，我是 JS 的新手。我正在尝试从 HTMLCollection 中获取一组团队名称（使用 Chrome 开发工具）。如果有更简单的方法，我愿意接受。到目前为止：

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

问题：每个 <a></a> 包含一个 <span></span> 但我需要一组团队名称（带下划线）。提前致谢。

Answer 1

您可以使用以下

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

Answer 2

您可以尝试使用 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>

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

How do I select text inside a <span> that is inside an HTMLCollection of links <a> using JavaScript?

javascript

arrays

web-scraping

google-chrome-devtools