你如何循环遍历 javascript 中未知数量的孩子和孩子的孩子

Question

I'm trying to loop through html that looks like this...

    <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>

I need to get data that's inside each of the divs of the div children, ignoring all of the header elements and span elements. There are an unknown amount of div children elements and also an unknown number of divs within each div child. Is there a way I can loop through this, I've been trying things for an hour now, and I'm not any closer to doing it.

This is what I've tried doing, I'm using selenium.

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++
}

This just logs 4, 1 and then 4, 2 and then 4,3 and so on...

Answer 1

This is a very simple and naive example of a recursive "algorithm" to get all the descendants of a given DOM node.

 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>

I hope you can use this to make your own, better, implementation.

---

If you only want the div elements at the bottom ( [<div>World</div>, <div>World</div>] from the above example) you can do the following:

 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>