木偶$ .eval选择嵌套元素

时间:2019-03-02 17:51:17

标签: javascript css-selectors puppeteer apify

让我说出这样的情况

<div id="details-container" class="style-scope ytd-channel-about-metadata-renderer">
         <yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer">Details</yt-formatted-string>
        <table class="style-scope ytd-channel-about-metadata-renderer">
          <tbody class="style-scope ytd-channel-about-metadata-renderer"><tr class="style-scope ytd-channel-about-metadata-renderer">
            <td class="label style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"></yt-formatted-string>
            </td>
            <td class="style-scope ytd-channel-about-metadata-renderer">
              <ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""></ytd-button-renderer>
              <div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
              <div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
              <a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""></a>
            </td>
          </tr>
          <tr class="style-scope ytd-channel-about-metadata-renderer">
            <td class="label style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"><span class="deemphasize style-scope yt-formatted-string"> Location:   </span></yt-formatted-string>
            </td>
            <td class="style-scope ytd-channel-about-metadata-renderer">
              <yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer">YourCountry</yt-formatted-string>
            </td>
          </tr>
        </tbody></table>
      </div>

让我说我需要获得“您的国家”这个名字,我实际上该如何获得呢?

到目前为止,我尝试过:

  const location = await page.$$eval(
    "#details-container > table > tbody:nth-child(1) > tr:nth-child(1) > yt-formatted-string",
    locationEl => locationEl.innerHTML
  );
console.log(location) // Undefined

不确定如何处理,尝试返回tr然后再次评估tr [1]不起作用,因为它表示tr没有函数。$$ eval。

请注意,我正在使用apify来获取页面。

2 个答案:

答案 0 :(得分:1)

在您提供的HTML中,所需的yt-formatted-string元素是第二个td下的第二个tr的直接子元素,但是您尝试将其与{{ 1}}是第二个yt-formatted-string的直接子代。您需要修复选择器。例如:

tr
console.log("HTML:", document.querySelector("#details-container > table > tbody > tr:nth-child(2) > td:nth-child(2) > yt-formatted-string").innerHTML)

还有you should be able to call $$eval &c. if you have an ElementHandle。问题在于您的选择器不匹配,所以您没有一个。

答案 1 :(得分:1)

我更喜欢使用jQuery。这是查询元素的最佳方法。 例如,您可以从Apify实用程序中注入jQuery。

const { puppeteer } = Apify.utils;

await puppeteer.injectJQuery(page);
const location = await page. evaluate(() => {
  return $('#details-container yt-formatted-string').last().text();
});
console.log(location);