如何通过开发者工具定位网页元素的代码

开发者工具 技巧 建站心得 文章 2021-03-01 12:06 2060 0 全屏看文

AI助手支持GPT4.0

    这篇文章前端技术人员或会使用开发者工具的请飘过。


    此文献给那些刚起步的站长或程序员,将告知大家如何快速定位网页内某个控件或元素的代码。便于大家获取空间的特征值(比如获取文章内容、根据div的ID做脚本操作等)

    比如我要定位文章页的这块区域。

    image.png


    那我们只需要在页面里按下F12按钮,打开开发者工具

image.png


然后我们点击左上方的箭头,然后把鼠标移动倒网页上进行元素选择。

image.png

    当元素被遮罩的范围正是最符合您的需求时,点击下左键。然后您就会看到开发工具下方的代码里一块代码被选中了。

    这块代码的div 就是您想要的容器,我们可以看到他的 id为 article_content。这就是元素选择特征了。

    ps: 尽量使用id作为元素特征值,因为按照规范,一个页面里的元素id都是唯一的,一个id代表一个元素,而class 适合您要匹配多元素使用。

-EOF-

AI助手支持GPT4.0