如何在div内获得值在ul内li与Javascript?

Question

我还没有学习jQuery，所以请使用javascript。下面是像

这样的HTML

<ul style="position: absolute;">
<li style="position: absolute;">
<div role="checkbox" class="filter-list-cell filter-text css-ahhuez">
<span class="dog-123" title="dogname">TEDDY</span>
<span>8%</span>
</div>
</li>
<li style="position: absolute;">
<div role="checkbox" class="filter-list-cell filter-text css-voqwhr">
<span class="dog-123" title="dogname">OZZY</span>
<span>7%</span>
</div>
</li>
.
.
.
8 more <li>
</ul>

我想要得到的是在li>span value "TEDDY"下一个li>跨越"OZZY"剩下的8个li值在span内，使结果成为一个数组，如:

dogname = [TEDDY,OZZY,REX...]

我尝试右键单击复制选择器路径，然后使用document.querySelectorAll()，我得到了10个NodeList，我数组。但我仍然需要通过div来获得跨度值。

我想我应该遍历它们?但我觉得很奇怪……我不是很熟悉HTML，所以请给我一些提示或指导这个问题

谢谢!

Answer 1

按dog-123类名抓取狗，然后在(转换为数组)节点列表上抓取map，以从每个节点的文本内容创建一个新的名称数组。

const dogs = document.querySelectorAll('.dog-123');
const names = [...dogs].map(dog => dog.textContent);
console.log(names);

<ul>
<li>
<span class="dog-123">TEDDY</span>
<span>8%</span>
</li>
<li>
<span class="dog-123">OZZY</span>
<span>7%</span>
</li>
<li>
<span class="dog-123">Bob from Accounting</span>
<span>700%</span>
</li>
</ul>

附加文档

• 传播语法

Answer 2

你可以通过使用CSS选择器来做到这一点:在ul内的li内的每个div内抓取第一个span。first-child部分被称为伪类，也就是说，它不仅根据自身及其父/兄弟元素来选择元素，而且根据XML树的特征甚至外部特征(如浏览器历史记录)来选择元素。

但是要小心，因为如果您有另一个ul，它的后代具有这些特征，那么您将选择不希望的值。

一行:

Array.from(document.querySelectorAll("ul > li > div span:first-child")).map(x => x.innerText);

如果您想要更精确(例如，在scraper中)，您可能会从具有已知id(因此是唯一的)的根元素开始。假设你有<ul id="myList">，那么CSS选择器就是#myList > li > div span:first-child。