网页JS自动化脚本(二)查找定位页面元素的方法

• 我们写脚本往往是要提取某些关键字,那么我们对于元素的查找和定位就很重要
• 首先我们打开浏览器,鼠标右键点击我们想要定位的元素,然后点击审查元素
  
• 然后浏览器会弹出调试工具台,我们继续看下图右侧的调试工具台

• 可以看到我画了9个序号,可以看到从第1个到第7个全部是div容器元素,并且是父子关系,第8代元素是一个链接a,所以我们想要定位的这一串"直击赛事现场"的文字就是在第9代,可以看到第9代元素由三个元素组成,前后各一个img图片元素,中间夹着一个span元素,这个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这一串是返回的内里的文字,所以括号内的代码就是一串文字"直击赛事现场，为世界杯呐喊",好了,保存关闭刷新网页测试
  
• OK定位成功