如何在 NodeJS 中获取 ElementHandle 的父级和兄弟级？

Question

我有一个 ElementHandle，而不是它的选择器，我如何将它的父级和兄弟级作为 ElementHandle。

我知道给定的元素选择器，可以使用

const item = document.querySelector(query);
const parent = item.parentElement;

如果我有 ElementHandle 而不是它的选择器，不知道该怎么办。请帮忙。

Answer 1

您可以使用elementHandle.$x()相对于 来评估 XPath 表达式elementHandle以获得给定元素的父级和兄弟级：

const example = await page.$('#example'); // Element
const example_parent = (await example.$x('..'))[0]; // Element Parent
const example_siblings = await example.$x('following-sibling::*'); // Element Siblings

Answer 2

尽管这个问题被标记为puppeteer，但它在 Google 中与“Playwright”的类似搜索中首先出现。

对于那些使用 Playwright 的人，您可以使用类似的解决方案（采用@grant-miller 提供的答案）：

const example = await page.$('#example'); // Element
const example_parent = await example.$('xpath=..'); // Element Parent
const example_grandparent = await example.$('xpath=../..'); // Element Grandparent
const example_siblings = await example.$$('xpath=following-sibling::*'); // Element Siblings