javascript - 映射表 child 内容与 puppeteer 师

Question

我的目标是获取 .textContent来自不同<td>标签，每个都位于单独的 <tr> 中.

我认为问题在于 table变量，因为我没有为 child 检查正确的变量。目前，data变量只获取第一个 <tr> , 所以 price使用此代码进行评估。然而，volume和 turnover才不是。我认为这是一个简单的修复，但我就是想不通!

JavaScript:

try {
    const tradingData = await page.evaluate(() => {
      let table = document.querySelector("#trading-data tbody");
      let tableData = Array.from(table.children);
      let data = tableData.map(tradeData => {
        console.log(tradeData);
        let price = tradeData.querySelector(".quoteapi-price").textContent;
        console.log(price);
        let volume = tradeData.querySelector("quoteapi-volume").textContent;
        console.log(volume);
        let turnover = tradeData.querySelector("quoteapi-value").textContent;
        console.log(turnover);
        return { price, volume, turnover };
      })
      return data;
    });

    console.log(tradingData);
  } catch (err) {
    console.log(err);
  }

HTML:

<table id="trading-data" class="qq_table">
    <tbody>
        <tr class="qq_tr_border_bot">
            <td>Price</td>
            <td class="qq_td_right quoteapi-number quoteapi-price" data-quoteapi="price">$0.105</td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Change</td>
            <td class="qq_td_right pos" data-quoteapi="changeSignCSS">
                <span data-quoteapi="change (signed)" class="quoteapi-number quoteapi-price quoteapi-change">0.005</span>
                <span data-quoteapi="pctChange (pct)" class="quoteapi-number quoteapi-pct-change">(5.00%)</span>
            </td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Volume</td>
            <td class="qq_td_right quoteapi-number quoteapi-volume" data-quoteapi="volume scale=false">5,119,162</td>
        </tr>
        <tr>
            <td>Turnover</td>
            <td class="qq_td_right quoteapi-number quoteapi-value" data-quoteapi="value scale=false">$540,173</td>
        </tr>
    </tbody>
</table>

例如，这应该返回 price="$0.11" , volume="3,900,558" , turnover="$412,187"

Answer 1

只有当您需要多个表或 tbodies 时，您才需要 map 函数。由于在您的示例中似乎并非如此，您可以这样做:

const tradingData = await page.evaluate(() => {
    let table = document.querySelector("#trading-data tbody");
    let price = table.querySelector(".quoteapi-price").textContent;
    let volume = table.querySelector(".quoteapi-volume").textContent;
    let turnover = table.querySelector(".quoteapi-value").textContent;
    return { price, volume, turnover };
});
console.log(tradingData);