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

AI助手支持GPT4.0

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

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

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

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

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

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

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

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