如何访问div id，cheerio node js中的数据状态

Question

我感谢所有参与并将帮助新手的人。

任务：访问div＝客户端状态，然后访问div＝Here Goes Somediv ID并从数据状态返回json。

<div class="client-state">
<div id="Here-Goes-Some-Div-ID" data-state='{"items":[{"action":"LAYOUT"}]'>
</div>

我设法引用了这样的div=客户端状态-

import cheerio from 'cheerio';
const id = ["98772"]
async function GetDataFunction () {
try {
for (let i = 0; i < id.length; i++) {
let HTMLresponse = await ProductSearchFunction(id[i]);
const $ = cheerio.load(HTMLresponse);
$('.client-state').each(function()
{
const ClientState = $(this).html()
console.log(ClientState)
})
}} catch (err) {
throw err
}  
};GetDataFunction()

不幸的是，我没有找到关于如何进一步访问"；Here Goes Some Div ID"；div和获取数据状态=我将感谢你的提示，提前谢谢你！

Answer 1

你可以使用这样的东西：

await page.$eval('.client-state #Here-Goes-Some-Div-ID', el => el.getAttribute('data-state'))

这是什么

1. 我们使用page.$eval方法来评估特定的DOM元素
2. 第一个参数是所需元素的CSS选择器，您可以在已经标识的类(.client-state(和HTML id(#Here-Goes-Some-Div-ID(之间使用子代组合子(单个空格(，id-s在id名称前面使用#
3. 函数的第二个参数是所谓的pageFunction，您可以在其中执行此操作：在data-state属性上使用Element.getAttribute()的el => el.getAttribute('data-state')

您可以将其定义为一个变量，然后使用JSON.parse()或您想对结果执行的任何操作解析其内容。

注意：在当前示例中，'{"items":[{"action":"LAYOUT"}]'是不可解析的，因为包装器对象不是用}关闭的！

完整示例：

const puppeteer = require('puppeteer')
async function main() {
const browser = await puppeteer.launch({
headless: false
})
const page = await browser.newPage()
await page.goto(url)
const dataState = await page.$eval('.client-state #Here-Goes-Some-Div-ID', el => el.getAttribute('data-state'))
console.log(dataState)
console.log(JSON.parse(dataState))
await browser.close()
}
main()

Answer 2

它是JSON，所以你必须解析它。

let state = $('[data-state']).attr('data-state')
let dataState = JSON.parse(state)