如何在javascript中循环遍历未知数量的子对象和子对象的子对象

Question

我正在尝试循环遍历如下所示的html。。。

<div>
<span>
...
</span>
<span>
...
</span>
<span>
...
</span>
<span>
...
</span>
<div>
<header>
...
</header>
<div>
...
</div>
<div>
...
</div>
...
</div>
<div>
<header>
...
</header>
<div>
...
</div>
<div>
...
</div>
...
</div>
<div>
<header>
...
</header>
<div>
...
</div>
<div>
...
</div>
...
</div>
...
</div>

我需要获取div子级的每个div内部的数据，忽略所有的header元素和span元素。div子元素的数量未知，每个div子元素中的div数量也未知。有没有一种方法可以让我循环一遍，我已经尝试了一个小时了，我还没有接近完成。

这是我尝试过的，我在用硒。

let i = 4
while(driver.findElement(By.xpath(`//*[@id="football"]/div/div/div/div[${i}]`))){
let j = 1
while(driver.findElement(By.xpath(`//*[@id="football"]/div/div/div/div[${i}]/div/div/div[${j}]`))){
console.log(i, j)
j++
}
i++
}

这只记录4，1，然后是4，2，然后是4,3，依此类推…

Answer 1

这是一个非常简单和天真的递归"算法"；以获取给定DOM节点的所有子节点。

const findAllChildren = (root) =>
root.children.length > 0
? [root, [...root.children].flatMap(findAllChildren)].flat()
: root;
console.log(
findAllChildren(document.body)
);

<p>Hello</p>
<div>Hello
<div>World</div>
</div>
<div>Hello
<div>World
<div>Hello
<div>World</div>
</div>
</div>
</div>

我希望您可以利用这一点来实现自己的、更好的实现。

---

如果您只想要底部的div元素(上例中的[<div>World</div>, <div>World</div>](，您可以执行以下操作：

const findAllChildren = (root) =>
root.children.length > 0
? [...root.children].flatMap(findAllChildren)
: root;
console.log(
[...document.querySelectorAll('body > div')].flatMap(findAllChildren)
);

<p>Hello</p>
<div>Hello
<div>World</div>
</div>
<div>Hello
<div>World
<div>Hello
<div>World</div>
</div>
</div>
</div>