你如何循環遍歷 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。 有沒有辦法可以遍歷這個，我已經嘗試了一個小時，但我離做這件事還差得遠。

這是我嘗試過的，我正在使用 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++
}

這只是記錄 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>