javascript - Puppeteer $.eval 选择嵌套元素
问题描述
可以说我给出了像这个页面这样的情况
<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>
可以说我需要得到“YourCountry”我如何真正得到这个元素?
到目前为止,我尝试过:
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 来获取页面。
解决方案
在您提供的 HTML 中,yt-formatted-string
您想要的元素是 secondtd
下 second的直接子元素tr
,但您尝试将其匹配为secondyt-formatted-string
的直接子元素tr
。您需要修复您的选择器。例如:
console.log("HTML:", document.querySelector("#details-container > table > tbody > tr:nth-child(2) > td:nth-child(2) > yt-formatted-string").innerHTML)
<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>
你应该可以打电话给$$eval
&c。如果你有一个ElementHandle
. 问题是你的选择器不匹配,所以你没有。
推荐阅读
- python - 在python中将csv文件作为字符串读取
- reactjs - 使用来自四个不同选择标签的值更新状态中的对象时出现问题
- bash - 我正在尝试找到一种方法将我当前的 SSID 记录到文档中
- ios - Swift 数组过滤器属性
- amazon-web-services - 如何通过在云端调整图像 lambda 边缘函数来修复 503 错误?
- r - 无法索引使用 seq() 和 rep() 创建的向量的某些值
- c# - 运行多个 Async/Await 调用时的 DBContext 和 AsNoTracking
- angular - Angular cli 7.1.4 提取的 styles.css 文件意外字符
- php - 如何修复 'preg_match(): Compilation failed: invalid range in character class at offset 1828' 错误在 laravel 'url' 验证中?
- svg - 如何在 Easel.js 中缩放 SVG 而不会丢失轮廓?