如何解决有没有一种方法可以为元素生成唯一的选择器,该选择器不会在刷新时或DOM位置更改时获得无效的元素?
我正在使用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与预定义的关键字匹配。
解决方法
对于位置,标记图标所在的<span>
元素之前的tv-profile__title-info-icon--place
类别非常独特,因此您可以使用该位置获取文本节点
const loc = document.querySelector('.tv-profile__title-info-icon--place').nextSibling.textContent;
对于锚元素,您知道它们的href
属性会有所不同(这就是为什么要正确吗?),因此可以将其用作选择器。例如
- twitter链接:
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"])
,
如果外部链接列表是有限的,则可以通过为querySelector
提供外部站点URL的一部分来检查每个链接是否存在:
document.querySelector('.tv-profile__title-info-item[href^="https://www.youtube.com"]')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。