[Web自动化] 开发者工具元素(Elements)面板

2.2 元素(Elements)面板

2.2.1 DOM结构查看与修改

查看DOM结构：

Elements面板是开发者工具中用于查看和编辑网页DOM结构的核心面板。当你打开Elements面板时，你会看到一个树形结构，它代表了当前网页的DOM结构。每个节点都对应着网页中的一个HTML元素，你可以通过点击这些节点来展开或收起其子元素，从而查看整个DOM树的结构。

虽然，可以通过展开节点来找到网页上的所有的元素，但通常会通过点击左上角的元素拾取按钮即可对选中网页上的元素，从而对该元素进行检查。

如下图，在左下方可以看到百度首页上搜索input框的元素，包括该元素的id、name、class以及其他属性。

操作元素

在选中元素后，通过右键菜单，我们可以对该元素进行相关操作。通常包括：

复制元素
粘贴元素
隐藏元素
删除元素
强制执行元素状态(active、hover、focus、visited、focus-within、focus-visble，这些元素状态之后将会在HTML的章节中介绍。)
复制：
1、复制OuterHTML
OuterHTML 是HTML元素及其所有子元素的HTML代码。当你复制一个元素的OuterHTML时，你实际上是在复制该元素及其内部所有内容的完整HTML结构。这可以用于在页面上动态创建相同结构的元素。
结果：

html 复制代码

<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

2、复制selector(CSS选择器)

CSS选择器是一种模式，用于选择需要样式化的元素。复制元素的Selector意味着你正在复制一个或多个CSS选择器，这些选择器可以唯一地或按特定规则选择页面上的该元素。这通常用于CSS样式化或JavaScript/jQuery等脚本中的元素定位。

结果：

①、#kw：该元素的id为kw

②、#form > span.bg.s_ipt_wr.new-pmd.quickdelete-wrap > input：该元素位于元素id为form下的span标签(类为：bg、s_ipt_wr、new-pmd、quickdelete-wrap)下input标签。
3、复制JS路径(DOM路径)

JS路径或DOM路径是指从文档的根元素（通常是）到目标元素的完整路径。这通常是通过编程方式（如使用JavaScript）访问DOM元素时使用的。复制JS路径可以方便地通过脚本找到并操作页面上的特定元素。

结果：

①、document.querySelector("#kw")

②、document.querySelector("#form > span.bg.s_ipt_wr.new-pmd.quickdelete-wrap > input")
4、复制样式

复制样式意味着你正在复制应用于元素的CSS样式规则。这可以包括内联样式（直接在元素上设置的样式）、来自

css 复制代码

 --bubble-width: 500px;
 --bubble-padding-left: 500px;
 list-style: none;
 margin: 0;
 padding: 0;
 font-family: Arial,sans-serif;
 font-size: 100%;
 border: 0;
 outline: 0;
 -webkit-appearance: none;

5、复制Xpath

XPath是一种在XML文档中查找信息的语言，但它也常用于在HTML文档中选择元素。XPath提供了一种强大的方式来定位元素，特别是当CSS选择器不足以满足需求时。复制元素的XPath意味着你正在复制一个XPath表达式，该表达式可以唯一地选择页面上的该元素。这通常用于自动化测试框架中，如Selenium，以定位和操作Web页面上的元素。

结果：

①、//[@id="kw"]：文档中id为kw的元素
②、// [@id="form"]/span[1]/input：文档中id为form的元素下的span下的input元素
6、复制完整Xpath

完整Xpath与Xpath类似，但可能包含更多的上下文信息，以确保XPath表达式的唯一性。在某些情况下，简单的XPath可能不足以唯一地定位一个元素，因此可能需要更长的、包含更多祖先元素的XPath。复制完整Xpath通常是为了确保在自动化测试或脚本中能够准确无误地定位到目标元素。

结果：

①、/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input
实时修改HTML元素和属性：

在Elements面板中，你可以直接双击HTML元素或其属性来修改它们。例如，你可以双击一个
标签来改变其id或class属性，或者修改其内部的文本内容。这些修改会实时反映在浏览器中，让你能够立即看到变化对页面显示的影响。
示例：
假设你有一个

元素，其文本内容为Hello, world!。你可以通过双击这个

元素来选中它的文本内容，然后输入新的文本，比如Welcome to the Elements panel。保存后，浏览器中的文本就会更新为Welcome to the Elements panel。

注意，这种修改只是在客户端中会显示，一旦刷新网页后，修改的内容则会还原。

2.2.2 CSS样式调试

查看和编辑CSS样式：

在Elements面板中，当你选中一个DOM元素时，右侧会显示该元素的样式信息。这些信息包括元素自身的样式（内联样式）、外部CSS文件中定义的样式以及浏览器默认的样式。

在Styles选项卡中，你可以直接修改元素的CSS样式。你可以点击某个样式旁边的铅笔图标来编辑它，或者添加新的样式规则。修改后的样式会实时应用到页面上，让你能够立即看到变化的效果。

理解CSS的层叠和继承规则：

在调试CSS样式时，理解CSS的层叠和继承规则非常重要。层叠规则决定了当多个样式规则应用于同一个元素时，哪个规则会优先被应用。而继承规则则决定了某些CSS属性（如字体、颜色等）是否可以从父元素继承到子元素。在Elements面板中，你可以通过查看样式信息的优先级和来源来理解这些规则是如何工作的。
示例：

假设你有一个
元素，它有一个类名为box。在CSS中，你为这个类定义了color: blue;和font-size: 16px;两个样式规则。但是，在Elements面板中，你发现这个
元素的文本颜色实际上是红色的。这可能是因为有一个更具体的选择器（如ID选择器或内联样式）覆盖了你的类选择器规则。通过查看Styles选项卡中的样式信息，你可以找到并修改导致颜色变化的具体规则。
实例：

上图中，修改了input框的width属性，从443px修改成了44px，导致input框的长度变成了44px。在样式中，如果取消勾选，则会在js代码(其实是css)中注释掉这条语句。

右边的索引xxx指明了该代码所在的行数，通过点击样式中的索引xxx可以转到目标代码，如下：

2.2.3 计算样式

计算样式标签中可以查看元素的盒模型的数据。

2.2.4 布局

布局标签中显示当前网页使用的布局方式。

2.2.5 事件监听器

2.2.5.1 事件

事件在网页中是指用户在网页上执行的一系列操作，如鼠标点击、键盘敲击等。这些操作会触发相应的事件，进而可能改变网页的状态或执行特定的功能。

当事件发生时，网页可能会通过JavaScript等脚本语言来响应这些事件，并执行相应的代码。这些代码可能会改变网页的DOM结构、CSS样式或执行某些逻辑操作，从而导致网页的内容、布局或功能发生变化。

例如，用户点击一个按钮可能会触发一个事件，该事件导致一个新的页面元素被添加到DOM中，或者一个现有的元素被隐藏或显示。

网页通过JavaScript的事件处理机制来处理事件。JavaScript提供了多种方式来注册和监听事件。

包括直接在HTML元素上使用事件属性（如onclick）、通过DOM属性设置事件处理程序（如element.onclick = function() {...}），以及使用addEventListener方法添加事件监听器。这些方法允许开发者指定当特定事件发生时应该执行的函数或代码块。

对用户而言，事件是网页交互性的基础。通过触发事件，用户可以与网页进行交互，执行各种操作，如提交表单、查看详细信息、播放视频等。事件处理机制使得网页能够响应用户的操作，提供动态和丰富的用户体验。

例如，当用户点击一个链接时，浏览器会导航到链接指向的页面；当用户填写并提交表单时，表单数据会被发送到服务器进行处理。这些交互行为都是基于事件处理机制实现的。

在HTML中，仅仅添加一个元素并不会自动给这个元素赋予onclick或click事件的处理程序，也不会有任何默认的响应动作（除了浏览器对按钮元素可能有的默认行为，比如提交表单，如果按钮位于表单内且类型为submit）。
onclick和click的区别

onclick是一个HTML元素的属性，它允许你直接在HTML元素上指定当点击事件发生时应该执行的JavaScript代码。但是，如果你没有在元素上设置onclick属性，那么点击这个按钮将不会有任何JavaScript代码被执行（除非有其他的JavaScript代码通过其他方式，如addEventListener，为这个按钮添加了事件监听器）。

click则是一个DOM事件，它会在元素被点击时触发。但是，仅仅因为元素可以触发click事件，并不意味着它有任何与之关联的默认行为或处理函数，除非你通过JavaScript显式地添加了这样的行为或函数。

这两种点击后弹出的提示框并不是HTML元素的一种，而是由JavaScript（或更具体地说，是Web API）生成的用户界面（UI）元素。它们之间的主要区别在于它们是如何被创建和控制的。
通过onclick属性创建的提示框：

当HTML元素（如）的onclick属性被设置为一个JavaScript代码片段时，这段代码会在元素被点击时执行。如果这段代码调用了alert()函数，那么浏览器就会显示一个警告框（alert box），其中包含传递给alert()函数的字符串作为消息。

这种方法简单直接，但它将JavaScript代码与HTML标记混合在一起，这可能会使代码难以维护，特别是在大型项目中。此外，它只允许为每个事件（如点击）指定一个处理程序，这限制了代码的灵活性和可扩展性。
通过addEventListener方法创建的提示框：

使用addEventListener方法，你可以为HTML元素添加事件监听器，这些监听器会在指定的事件发生时执行回调函数。这种方法允许你将JavaScript代码与HTML标记分离，使代码更加清晰和可维护。此外，你还可以为同一个元素添加多个事件监听器，以响应不同类型的事件或执行不同的操作。

当使用addEventListener方法为点击事件添加监听器，并在回调函数中调用alert()函数时，效果与使用onclick属性相同：浏览器会显示一个警告框。但是，这种方法提供了更多的灵活性和控制力。
主要区别：
代码结构：onclick属性将JavaScript代码直接嵌入到HTML中，而addEventListener方法则将JavaScript代码与HTML分离，通常放在

html 复制代码

<!-- 没有任何事件处理程序的按钮 -->
<button>点击我</button>

<!-- 带有onclick事件处理程序的按钮 -->
<button onclick="alert('按钮被点击了！')">点击我</button>

<!-- 或者，你可以使用JavaScript来添加事件监听器 -->
<button id="myButton">点击我</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
 alert('按钮被点击了，通过addEventListener！');
});
</script>

在上面的例子中，第一个按钮点击时不会有任何响应，因为它没有绑定任何事件处理程序。第二个按钮点击时会显示一个警告框，因为它有一个onclick属性。第三个按钮也是通过JavaScript的addEventListener方法添加了一个点击事件监听器，所以点击时也会显示一个警告框。

综上所述，事件是网页交互性的重要组成部分，它们的发生和处理对于网页的功能和用户体验至关重要。通过合理的事件处理机制，开发者可以创建出动态、响应式和用户友好的网页应用。

2.2.5.2 查看事件监听器

在Elements面板中，你可以查看DOM元素上注册的所有事件监听器。这包括点击（click）、鼠标移入（mouseover）、键盘事件（keydown）等各种类型的事件。要查看事件监听器，你需要点击DOM元素，在右边的窗口中选择事件监听器标签页。
常见事件：

在网页开发中，DOM（Document Object Model）元素上的事件注册是交云互动和动态网页功能的关键部分。这些事件允许开发者在用户与网页元素交互时执行特定的JavaScript代码。以下是一些常见的DOM元素事件及其说明：
1、click：

当用户点击某个元素时触发。这是最常用的交互事件之一，常用于按钮点击、链接点击等场景。
2、mouseover 和 mouseout：
mouseover ：当鼠标指针移动到元素上方时触发。
mouseout ：当鼠标指针从元素上方移开时触发。

这两个事件常用于实现鼠标悬停效果或提示信息。
mousedown、mouseup
mousedown ：当鼠标按钮在元素上按下时触发。
mouseup ：当鼠标按钮在元素上释放时触发。通常与mousedown结合使用来检测点击动作。
keydown、keypress 和 keyup：
keydown ：当用户按下键盘上的任意键时触发，不区分大小写字母。
keypress ：当用户按下并产生字符的键时触发（如字母、数字、Enter等）。对于功能键（如F1、Alt、Ctrl等）可能不会触发。
keyup ：当用户释放键盘上的键时触发。

这些事件常用于处理键盘输入或快捷键操作。
focus 和 blur：
focus ：当元素获得焦点时触发。例如，用户点击输入框或通过Tab键切换到输入框时。
blur ：当元素失去焦点时触发。例如，用户点击输入框外的区域或切换到另一个输入框时。
change：

当元素的值发生变化且该元素失去焦点时触发。常用于、和等元素。
submit：

当表单提交时触发。这允许开发者在表单数据发送到服务器之前进行验证或修改。
load 和 unload：

（在较新的浏览器中可能已被废弃，建议使用DOMContentLoaded和beforeunload）
load ：当页面或指定资源（如图片、脚本等）完全加载后触发。
unload ：当页面即将卸载时触发，常用于执行清理操作。但请注意，出于安全考虑，很多浏览器限制了unload事件处理程序中可执行的操作。
touchstart、touchmove 和 touchend：

这些事件与触摸屏交互相关，分别对应触摸开始、触摸移动和触摸结束。它们对于开发移动设备上的交互特别有用。
resize：

当窗口或框架被调整大小时触发。这可以用于响应式网页设计，以根据浏览器窗口大小调整布局。

以上只是DOM事件中的一小部分，实际上还有许多其他事件可以根据具体需求进行使用。了解这些事件以及如何在JavaScript中注册和使用它们，对于创建交互式和动态的网页至关重要。

2.2.5.3 移除事件监听器

在事件监听器标签中，可以通过点击事件后面的js代码进行直接跳转并定位到与该元素对应的事件的js代码。如下：

当然，可以通过点击移除对该元素的指定事件进行移除。

2.2.5.4 理解事件冒泡与捕获机制

在调试事件监听器时，理解事件冒泡与捕获机制非常重要。事件冒泡是指事件从触发它的最具体元素（即事件目标）开始，然后逐级向上传播到DOM树的根节点。而事件捕获则相反，它是从DOM树的根节点开始，然后逐级向下传播到事件目标。在注册事件监听器时，你可以通过指定第三个参数（useCapture）为true或false来选择使用事件捕获或事件冒泡机制。
示例：

假设你有一个嵌套的
结构，外层
和内层
都注册了点击事件监听器。如果你在内层
上点击，并且两个监听器都使用了事件冒泡机制，那么外层的监听器会先被触发，然后是内层的监听器。但是，如果你将内层监听器的useCapture设置为true，使其使用事件捕获机制，那么它将先被触发。