使用Puppeteer时，如何用querySelector仅获取首个子元素的href

优化后的代码（推荐使用稳定选择器） #

利用TikTok页面中data-e2e属性（这类标识比动态生成的class更稳定），直接定位到首个视频的链接元素：

const grabURL = await page.evaluate(() => {
    // 定位到第一个视频项容器下的链接
    const firstVideoLink = document.querySelector('[data-e2e="user-post-item"] .tiktok-yz6ijl-DivWrapper a');
    // 存在则返回href，否则返回null避免报错
    return firstVideoLink ? firstVideoLink.href : null;
});

console.log(grabURL);

基于你原有选择器的修改 #

如果要保留你最初使用的容器选择器，只需调整逻辑，直接获取目标a标签的href属性而非innerHTML：

const grabURL = await page.evaluate(() => {
    const pgTag = document.querySelector('.tiktok-1qb12g8-DivThreeColumnContainer.eegew6e2 div div div div div');
    // 获取容器内第一个a标签
    const firstLink = pgTag?.querySelector('a');
    return firstLink ? firstLink.href : null;
});

console.log(grabURL);

关键说明 #

• 原代码返回innerHTML会输出元素下所有子节点的HTML内容，这是冗余的；我们需要的是a标签的href属性，因此要直接定位到a标签并读取该属性。
• 使用?.可选链操作符可以避免因元素不存在导致的报错，提升代码健壮性。

内容的提问来源于stack exchange，提问作者Lloyd Walker