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

Question

I'm trying to scrape some data for a fun personal project, and I'm new to JS. I'm trying to get an array of team names from an HTMLCollection (using Chrome Dev Tools). If there's an easier way I'm open to it. So far:

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

QUESTION: Each <a></a> contains a <span></span> but I need an array of team names (underlined). Thanks in advance.

Answer 1

You can try this using 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

You can use the following

 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>

It finds every element inside vMidCollection that has class="teamname" and appends it text to team_names