使用Puppeteer从多个列表项中分别提取两个子span的文本值

DevOps 小满

2026-10-2

解决方案

你可以直接在evaluate回调内部通过DOM API获取当前<a>标签下的两个子<span>内容，一次性返回你需要的两个字段，这种方式通信次数少，执行效率更高：

for(let i = 0; i < itemArray.length; i++){
    const { itemName, itemCount } = await itemArray[i].evaluate(el => {
        // 在浏览器侧直接查询当前a标签的子元素
        const nameSpan = el.querySelector('span:not(.small_number_block)')
        const countSpan = el.querySelector('span.small_number_block')
        return {
            itemName: nameSpan.textContent.trim(),
            itemCount: countSpan.textContent.trim()
        }
    })
    // 按要求格式输出
    console.log(`Item Name: ${itemName}`)
    console.log(`Item Count: ${itemCount}\n`)
}

如果你偏好从Node.js侧通过选择器查询子元素，需要调用元素实例的$方法（而不是全局的page.$$），$方法的查询范围仅限当前元素的子节点：

for(let i = 0; i < itemArray.length; i++){
    // 从当前a元素下查询子span，而非全局查询
    const nameEl = await itemArray[i].$('span:first-child')
    const countEl = await itemArray[i].$('span.small_number_block')
    const itemName = await nameEl.evaluate(el => el.textContent.trim())
    const itemCount = await countEl.evaluate(el => el.textContent.trim())
    console.log(`Item Name: ${itemName}`)
    console.log(`Item Count: ${itemCount}\n`)
}