querySelectorAll() - 需要帮助只返回某些元素

Question

我正在尝试控制台记录“Power Play #1”和“Power Play #2”列表中的所有球员姓名，但不包括 https://www.rotowire 上“受伤”部分中列出的球员.com/hockey/nhl-lineups.php

我尝试编写一个简单的循环，但不幸的是，它提取了所有玩家，包括那些列为受伤的玩家。

我不知道如何从 console.log 列表中排除受伤的玩家，因为他们没有独特的等级或 ID。任何人都可以提出一些建议吗？

var powerplay = document.querySelectorAll('.lineup__player > a');
for (let i = 0; i < powerplay.length; i++){
console.log(powerplay[i].innerHTML)
}

Answer 1

球员在“伤害”部分下的列表标记并不理想，因为“伤害”标题只是球员

li

s的直接兄弟

li

。

但是，伤害类型由具有

.lineup__inj

类的元素指定，因此您可以以此为基础。你可以推断没有

li

的玩家

.lineup__inj

没有受伤。

所以我要做的是获取所有玩家

li

s，过滤任何包含具有

.lineup__inj

类元素的元素，然后从每个剩余元素中获取

a

的

innerHTML

：

// Need to use Array.from() to turn the NodeList into an Array so we
// can use higher order array functions.
const players = Array.from(document.querySelectorAll(".lineup__player"))
  // Only keep elements that do not have `.lineup__inj` elements.
  .filter(player => !player.querySelector(".lineup__inj"))
  // Create a new array consisting of the `a` elements found within
  // each remaining li, then get the `innerHTML`.
  .map(player => player.querySelector("a").innerHTML);

console.log(players);

这个解决方案当然与现有的标记结构高度耦合，但是根据您需要它的原因，它应该没问题。