填表教程-JS基础篇-定位元素-点击元素

mosheng

##### * 基于软件：[FB指纹全功能浏览器]<br /> <br /> <br /> ##### * 软件采用框架：[FBrowserCEF3Lib]<br /> ##### * 浏览器内核：Chromium内核<br /> <br /> <br /> * * *<br /> <br /> <br /> * #### 常用的JS定位元素<br /> <br /> 1. 定位网页中的元素<br /> <br /> * 通过标签名（Tag Name）：使用 document.getElementsByTagName() 方法来获取具有指定标签名的元素集合。<br /> ```<br /> document.getElementsByTagName("div")<br /> ```<br /> <br /> 2.通过类名（Class Name）<br /> * 使用document.getElementsByClassName() 方法来获取具有指定类名的元素集合。<br /> <br /> ```<br /> document.getElementsByClassName('classname')<br /> ```<br /> <br /> <br /> 3.通过 ID<br /> * 使用 document.getElementById() 方法来获取具有指定 ID 的元素。<br /> ```<br /> document.getElementById('elementId')<br /> ```<br /> <br /> 4.通过选择器（Selector）<br /> * 使用 document.querySelector() 或 document.querySelectorAll() 方法来根据 CSS 选择器获取元素。<br /> ```<br /> document.querySelector('.classname')<br /> ```<br /> ```<br /> document.querySelectorAll('.classname')[0]<br /> ```<br /> <br /> #### 以上所有方法，都可以通过浏览器的控制台右键元素，复制js路径<br /> <img id="aimg_B2R24" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a135e0ea9cb140340efb3.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> * ##### 现在主要讲下选择器document.querySelector的方法<br /> 比如选择百度一下按钮<br /> <img id="aimg_VQWe1" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a14b30ea9cb1403442a2c.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> ```<br /> document.querySelector("input[id='su']")<br /> ```<br /> ```<br /> document.querySelectorAll('input[id="su"]')[0]<br /> ```<br /> * ##### 上面两个方法都可以<br /> <br /> input=元素名<br /> input后面用中括号括起来<br /> 括号里面是如何去定位到这个元素，这里是通过ID的属性值<br /> <br /> * 为什么主讲这个方法，因为【FB指纹全功能浏览器】就是用的querySelectorAll方法，其中还用到索引。<br /> <img id="aimg_UMyZY" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a27630ea9cb1403755c0c.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> * 但是基础的JS命令和意思也是要掌握的，因为软件也只是执行JS命令，为什么使用这个软件来测试，因为是我自己写的，我自己比较清楚里面的逻辑。当你掌握好填表JS命令后，就不局限于这个软件了，在任何支持填表的软件包括浏览器控制台都能熟练使用。当然了，这个只支持基础的填表功能，如果是那种比较复杂的填表，还是要用到执行JS命令。<br /> <br /> <br /> * * *<br /> <br /> <br /> * ##### 以下是填表配合例子来讲解，同时贴出JS代码和FB的填表代码<br /> <br /> 1、点击元素<br /> 点击“百度一下”<br /> <img id="aimg_qWCP7" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a312e0ea9cb14038d6ffc.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> 右键复制JS路径<br /> ```<br /> document.querySelector("#su")<br /> ```<br /> 用JS执行点击的命令<br /> ```<br /> document.querySelector("#su").click()<br /> ```<br /> ```<br /> document.querySelectorAll("#su")[0].click()<br /> ```<br /> ```<br /> document.querySelectorAll("input[id='su']")[0].click()<br /> ```<br /> 软件执行点击<br /> <img id="aimg_mny3g" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a36470ea9cb140396b4ad.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> FBrowser框架代码<br /> <img id="aimg_GDibI" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a36810ea9cb1403972c7a.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> 这里应该就可以看出来，FBrowser封装的填表框架其实就是document.querySelectorAll<br /> <br /> 上面是通过ID去定位的元素，如果是通过class定位，就要用到索引，因为id在html中是唯一的，class会有多个相同的存在<br /> <br /> <br /> ### **下图是我们通过class去寻找元素**<br /> <img id="aimg_Sp34c" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a37d80ea9cb14039b6a6c.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> 下一页的是一个a标签，class属性值等于“n”<br /> 在控制台通过document.querySelectorAll("a[class='n']")命令打印出所有的class属性值等于“n”的元素，发现只有一个，索引是0，那么点击的下一页的js命令就是<br /> ```<br /> document.querySelectorAll("a[class='n']")[0].click()<br /> ```<br /> 软件执行点击<br /> <img id="aimg_xZ0Uh" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a389a0ea9cb14039d67c3.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> 当存在多个class属性时候，比如百度热搜下面的9个话题，没有ID，通过calss属性值“title-content-title”取定位元素<br /> <img id="aimg_l9nmT" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a397e0ea9cb14039f1251.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> 控制台执行如下JS命令<br /> ```<br /> document.querySelectorAll("span[class='title-content-title']")<br /> ```<br /> 能输出所有的span标签class属性等于“title-content-title'”元素<br /> <img id="aimg_G7VMH" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3a460ea9cb1403a0883c.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> 执行如下命令是输出符合条件的第一个元素内的文本值<br /> ```<br /> document.querySelectorAll("span[class='title-content-title']")[0].innerText<br /> ```<br /> <img id="aimg_KVK3g" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3b1b0ea9cb1403a222b7.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> 同理，执行如下命令是输出符合条件的第5个元素内的文本值<br /> ```<br /> document.querySelectorAll("span[class='title-content-title']")[5].innerText<br /> ```<br /> <img id="aimg_fojzw" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3b870ea9cb1403a2e2c1.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> #### 扩展：通过多个属性值去定位元素<br /> <img id="aimg_vUnsP" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3cac0ea9cb1403a51233.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> 上图中，找到百度首页-推荐下的多个文章<br /> 首先，它是a标签<br /> 其次，class=“s-news-item-title c-link c-font-big  title-clamp-2  has-tts”<br /> 同时，data-click="LOG_LINK"<br /> <br /> 那么这里通过class属性值和data-click的属性值去定位它<br /> 在控制台输入以下代码：<br /> ```<br /> document.querySelectorAll("a[class*='s-news-item-title'][data-click='LOG_LINK']")<br /> ```<br /> <img id="aimg_GzMds" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3d340ea9cb1403a60d76.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> 这里解释下class*='s-news-item-title'<br /> 型号代表包含的意思<br /> <img id="aimg_MOnQ3" onclick="zoom(this, this.src, 0, 0, 0)" class="zoom" src="https://pic.imgdb.cn/item/662a3d820ea9cb1403a6a0b7.png" onmouseover="img_onmouseoverfunc(this)" lazyloadthumb="1" border="0" alt="" /><br /> <br /> <br /> PS：第一篇教程写到这，尽量写的简单了，让小白也看得懂，如果这篇教程对你有帮助，请评论+评分，后期是否继续更新，还得看帖子的热度，如果评分和留言的人比较多，会继续更新！<br /> 有不懂的可在帖子下方留言，不定期会看！<br />

Isaac82

膜拜大神

空气刘海

宇宙打瞌睡

路过，看看撒情况

Iceberg

边界之外

浮生梦未醒

感谢分享

Amelia1

路过，看看，支持下

dwzml

看不得内容的啊

yangduojie

非常好的教程 适合新手