javascript - 有没有办法为在刷新或 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>之前的元素，标记图标所在的位置，有一个非常独特的类tv-profile__title-info-icon--place ，因此您可以使用

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

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

推特链接:a[href*="://twitter.com/"]

youtube 链接:a[href*="://www.youtube.com/"]

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

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