Как я могу получить дочерние элементы элемента HTML, используя puppeteer, чтобы создать дерево HTML вместе с их стилем, вычисляемым браузером?

Question

 const e = await page.querySelectorAll('body')
 const htmlTag = await page.evaluate((e) => e.outerHTML, e)
 const compStyle = await page.evaluate((e) => 
             JSON.parse(JSON.stringify(getComputedStyle(e))), e)

Используя приведенный выше код, я получаю HTML-элемент body и его вычисляемый стиль.Как мудрый, я должен получить его дочерние элементы и их стиль.Как я могу получить это?

Answer 1

Если вы не возражаете против упорядочения элементов, вы можете создать массив всех элементов, используя простой селектор body * и цикл.

Сначала давайте абстрагируем экстрактор стилей, потому что мы будемиспользуя одно и то же несколько раз.

// get the styles for particular element
// apply all kind of JSON filtering here
function getElementStyles(elem) {
    return JSON.parse(JSON.stringify(getComputedStyle(elem)))
}

// this will generate a single array containing all elements
function getStyleArray(selector) {
    const styles = []
    const allElements = document.querySelectorAll(selector)
    for (const element of allElements) {
        const style = getElementStyles(element)
        styles.push(style)
    }
    return styles;
}

//usage
getStyleArray('body *')

Если вы хотите получить дерево, для этого уже есть несколько библиотек.Это, как говорится, вот как вы можете повторить один самостоятельно.Я использовал рекурсию, чтобы пройти через это.

// find if element is an element :D
function isElement(element) {
    return element instanceof Element || element instanceof HTMLDocument;
}

// this will generate a tree style array
// all child elements are accesible using the child key
function getChildStyles(elem) {
    const childStyles = []
    for (let childNode of elem.childNodes) {
        if (isElement(childNode)) {
            const singleChildStyle = getElementStyles(childNode)

            // recursion
            if (childNode.hasChildNodes()) {
                singleChildStyle.child = getChildStyles(childNode)
            }
            childStyles.push(singleChildStyle)
        }
    }
    return childStyles
}

// usage
getChildStyles(document.body)

Обратите внимание,

• , что это можно улучшить, используя лучшие циклы и другие методы сортировки / поиска.
• это будет стоить вам много времени, если на странице много элементов.

Результат:

Это работает !!!

Давайте применим на кукловода, вы можете просто скопировать, вставить их или использовать addScriptTag .

await page.evaluate(() => {
        // add the scripts we created somewhere and then use them here
        return {
            arrayBased: getStyleArray('body *'),
            treeBased: getChildStyles(document.body)
        }
})