有没有办法为元素生成唯一的选择器，该选择器在刷新时或 DOM 位置更改时不会获得无效元素？

Question

我正在使用 puppeteer 抓取该网站的用户配置文件。我有一个个人资料链接列表，用于转到每个个人资料页面并抓取每个用户的 twitter 链接、youtube 链接和其他信息。

示例配置文件

• https://www.tradingview.com/u/QuantNomad/ - 有 youtube、twitter、网站但没有位置
• https://www.tradingview.com/u/CryptoRox/ - 有推特、网站但有位置但没有 youtube

这是我用来为 twitter、youtube 和网站链接生成唯一选择器的配置文件。

我使用 chrome devtools 来获取唯一选择器，youtube 的选择器看起来像这样

但是在我共享的另一个个人资料中，它没有 youtube 链接，获取了 twitter 链接，但如果 youtube 链接不存在，我希望它为空。

并非所有用户都有 youtube 链接或 twitter 链接等。因此，这些独特的选择器在不同的配置文件中获得了错误的数据。

我知道选择器只是通过获取第 4 个项目来完成他们的工作（因为选择器是a:nth-child(4)）但是我怎样才能获得一个唯一的选择器来只返回那种数据，例如 youtube 选择器获取 youtube 链接，如果没有链接，则它返回什么也没有。

还要记住，链接可以是随机的，以网站链接为例，每个用户都有不同的网站链接，因此您无法将 href 或 innerText 与预定义的关键字匹配。

Answer 1

对于位置，<span>标记图标所在的位置之前的元素具有非常独特的 class tv-profile__title-info-icon--place，因此您可以使用

const loc = document.querySelector('.tv-profile__title-info-icon--place').nextSibling.textContent;

对于锚元素，您知道它们的href属性会有所不同（这就是您想要它的原因？），因此您可以将其用作选择器。例如

• 推特链接： a[href*="://twitter.com/"]
• 优酷链接： a[href*="://www.youtube.com/"]

不匹配的一个链接将是个人站点链接：

a.tv-profile__title-info-item:not([href*="://twitter.com"]):not([href*="://www.youtube.com"])