

div容器元素,并且是父子关系,第8代元素是一个链接a,所以我们想要定位的这一串"直击赛事现场"的文字就是在第9代,可以看到第9代元素由三个元素组成,前后各一个img图片元素,中间夹着一个span元素,这个span元素是通常用作同一行中的小容器使用,用于在同一横行中插入内容Elements,确保是在元素窗口,然后按ctrl+F键,我们直接检验一下看能不能直接定位元素
span.undertips-link-text
span,然后点.是代表css样式的意思,后面接匹配样式undertips-link-text,因为这个"直击赛事现场"的文字前的class="undertips-link-text"它的CSS的名称就是这个,所以我们直接搜它就出来了,可以看到这个元素栏变成了黄色,并且结果是唯一的1 of 1,就是在所有的span的集合里面只有这个元素使用了undertips-link-text样式.
1 of 1那么,我们就可以直接进行定位操作了,我们把脚本代码稍作修改// ==UserScript==
// @name New script - baidu.com
// @namespace Violentmonkey Scripts
// @match https://www.baidu.com/
// @grant none
// @version 1.0
// @author -
// @description 2022/11/24 上午10:16:35
// ==/UserScript==window.onload=function(){alert(document.querySelector("span.undertips-link-text").innerText);
}
document.querySelector这个是原生的元素精准定位的方法,只能定位到找到的元素中的第一个元素,如果是查到元素合集,要用document.querySelectorAll,我们这里只要定位一个元素,所以用querySelector,然后把刚才的定位信息输入进去"span.undertips-link-text"这一串就是我们刚才的元素定位信息,记得打上引号.innerText这一串是返回的内里的文字,所以括号内的代码就是一串文字"直击赛事现场,为世界杯呐喊",好了,保存关闭刷新网页测试
上一篇:nuxt3:我们开始吧!