如何在网页里找东西——网页爬虫/页面元素操作基础，selector选择器入门
|
admin
2025年4月23日 1:39
本文热度 88
|
HTML就是网页的基础结构，简单理解，可以把它当作是一个房子。<p>表示段落(paragraph)
<img>表示图片(image)
<a>表示链接(anchor)
<div>表示板块(division)
<select>表示下拉选框
<input>表示输入框
CSS是网页的样式，简单理解，可以把它当作房子的装修风格。h2 {color：red} 标题文字颜色是红色
p {font-size：16px} 段落的字体大小为16个像素
两个结合起来，就形成了网页基础。HTML用来定义网页里有哪些东西，CSS用来描述这些东西是什么样子的。HTML就比如一个房子，是三室一厅的结构，其中客厅有沙发、卧室有床；CSS描述了，客厅的沙发是白色、卧室的床是2米宽。/*** 一个叫house的房子，里面有三个房间div。* 这三个div房间的class类型都是box，背景色都是green。* 其中客厅里面有沙发，颜色color是白色，卧室的床宽度是15px*/<style>#house {height: 30px; width:100px}div .box {background-color:green}.couch {color：white; width:50px}.bed {width:15px}</style>
<div id="house"> <div class="box">客厅 <p id="couch">沙发</p> </div> <div class="box">餐厅</div> <div class="box">卧室 <p class="bed">床</p> </div></div>
PS：还有个东西叫js，javascript。js是在网页上用来执行的代码，控制网页上的内容如何变化。用房子的概念去理解，当你走进了厕所、站在马桶前，马桶盖自动打开，就是js来控制的。怎么使用css定位元素？假设有这样一个“房子”，里面放了p、a、img这些“家具”，如何找到对应的元素呢？这是最简单的选择器，直接观察html的标签即可作出选择，如用来选择有相同类的元素，一般情况下，一个元素会有一个class，可以通过这个属性进行定位，它的关键符号是.号跟类选择器相似，一个元素如果带有id，则可以用ID选择器定位，它的关键符号是#号，一个元素只有一个id
4、属性选择器
一个html元素会带有很多属性，比如<input placeholder="请输入名称" class="input-name" target-id="nameId" title="名称">
里面的placeholder、class、target-id、title都是这个input的属性，它的关键符号是[ ]号
input[target-id="nameId"][title="名称"] 选择target-id="nameId"并且title="名称"的input
即把不同的选择方式组合起来使用，用于更加精准的定位，先看看以下代码<div id="house"> <div class="box">客厅 <p class="furniture" id="couch">沙发</p> <p class="furniture" id="chair">凳子</p> </div> <div class="box">餐厅</div> <div class="box">卧室 <p id="bed">床 <a class="furniture" id="pillow">枕头</a> </p> </div></div>
解释：选择div标签并带有box这种class的所有元素，并在其中查找id=chair的元素，即查找到<p id="chair">凳子</p>注意空格的位置，空格表示向下查找，找下面的所有后代元素，如：解释：查找id=couch的p元素，返回值是空，因为没有id=couch的div元素解释：查找div元素下面的id=bed的元素，返回值是<p id="bed">床</p>解释：查找div元素下面的class=box的所有元素，返回值是“客厅”、“餐厅”、“卧室”这个三个元素另外，还有一种情况也是经常遇到，就是>符号，也表示向下查找，不过查找的范围，仅查找当前节点下的子元素，不包括子元素的子元素。解释：查找class=box的div元素下面的子元素里包含class=furniture的元素，返回值是“沙发”、“凳子”这两个元素解释：查找class=box的div元素下面的所有后代元素里包含class=furniture的元素，返回“沙发”、“凳子”、“枕头”这三个元素div:nth-child(2) 在所有的div中取第二个最常用的，标注了绿色，学会这几个，后续组合起来也够用了：在百度页面的输入框，右键，选择属性，会弹出html结构。<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off" placeholder="特朗普再次扬言要接管加沙">
input[type="text"][name="wd"].s_ipt在浏览器的Console标签页，输入document.querySelectorAll('input[type="text"][name="wd"].s_ipt')查询到的元素列表，只有一个，说明使用这个方法确实能够找到这个唯一的元素。当然，你也可以使用document.querySelector('input[type="text"][name="wd"].s_ipt')直接获取到这个元素。input[type="submit"][value="百度一下"].btn在Console标签页里，输入以下代码并回车，会自动跳转到搜索结果页面。document.querySelector('input[type="text"][name="wd"].s_ipt').value="打工助手-数据录入辅助工具";
如果觉得上面的教程还是太复杂了，也有一种更简单的方法。可以在浏览器的html元素上，直接右键，在弹出的选项中选择“copy->copy selector”，再粘贴到文本框，这样也能得到浏览器帮你计算出来的selector。比如获取“5 苹果紧急从印度调飞机载iPhone回美”这个页面元素，通过简单法获取到的selector为：#hotsearch-content-wrapper > li:nth-child(2) > a > span.title-content-title使用document.querySelector('#hotsearch-content-wrapper > li:nth-child(2) > a > span.title-content-title')，同样可以验证获得的这个元素1、这种方法适用于没有复杂动态效果的简单页面，因为组装出来的selector是相对于整个html绝对定位的路径。2、对于现代常用vue、react或一些动态元素很多的页面，取到的selector不一定全部适用。因为这些网页的元素是动态生成的，有些元素可能在页面的第2个位置，点击某个按钮后，会变成第3个位置。
学完这个，接下来，就可以使用【打工助手-数据录入辅助工具】编写流程脚本了。可以参考以下文章：
阅读原文：原文链接
该文章在 2025/4/23 10:40:42 编辑过
400 186 1886
