如何 Selenium 在树中查找元素？

WebDriver 向浏览器发送一个定位器，浏览器遍历已解析的树，直到找到匹配项，然后返回一个 WebElement 句柄。诸如 id、name、CSS 选择器和 XPath 之类的定位器，实际上只是描述了对同一节点的不同搜索规则。

GitHub Copilot 可以编写 DOM 操作代码吗？

Copilot 可以根据注释生成事件监听器、查询选择器链和遍历循环，并且在常见模式上表现可靠。由于它无法查看您的标记，因此请务必在实际页面上测试其建议。

DOM 是什么 Selenium WebDriver？结构和全称

⚡ 智能摘要

文档对象模型将 HTML 页面暴露给 Java脚本被视为对象树，允许脚本和 Selenium WebDriver 可以在浏览器运行时读取、定位和更改页面上的任何元素。

🔘 完整形式： DOM 代表文档对象模型，是 W3C 制定的 HTML 和 XML 文档标准接口。
☑️ 树状结构： 每个标签都成为一个节点，因此 html、head、body、article 和 p 构成父子层次结构。
✅ 三个物体： 窗口包裹选项卡，文档标记树根，元素代表每个单独的标签。
🧪 核心方法： getElementById、querySelector 和 querySelectorAll 获取节点；innerHTML 读取并重写其内容。
🛠️ 调试： 浏览器开发者工具会显示已解析的树状结构，但在那里所做的编辑只会持续到页面重新加载为止。
📊 活动： 诸如点击和加载之类的操作，可以通过 onclick 属性或 addEventListener 拦截广播消息。

DOM 是什么 Selenium WebDriver？

DOM in Selenium 网络驱动程序是网页开发的重要组成部分使用 HTML5 和 Java脚本。DOM 的全称是文档对象模型。DOM 不是计算机科学概念。它是一组简单的接口，在 Web 开发人员中标准化，用于使用以下方式访问和操作 HTML 或 XML 中的文档 Java脚本。

这些标准可帮助开发人员构建网页而不必担心实现细节。参与标准化这些接口的一些组织包括 Mozilla、Apple、 Microsoft, Google等等，Adobe 等。然而，W3C 负责制定标准并发布标准——参见此处（https://dom.spec.whatwg.org/).

以下各节涵盖文档结构、DOM 公开的对象以及如何检查这些对象。Mozilla 将最新的 API 参考文档保存在…… MDN 文档对象模型页面.

所有的 Selenium 定位器解析的是同一棵树，因此下面的结构是…… 查找元素() 搜索。

理解 DOM 结构

如果你正在构建任何涉及使用脚本的网站，你需要了解 DOM 结构 Java脚本。如果你在网站上执行以下任何一项或所有复杂任务，那么理解 DOM 就更加重要了——

德韦洛ping 无需刷新整个页面即可持续自动更新的内容——例如用户投资组合中所有股票的当前价格
德韦洛ping 高级用户交互功能，例如动态添加或修改内容——例如，能够向您的投资组合添加更多股票。
德韦洛ping 用户可自定义的内容——例如，能够更改布局，使共同基金投资组合显示在股票投资组合之前。
德韦洛ping 网站内容具有响应式设计，因此您的网站可以自动适应不同的媒体屏幕，例如 iPhone、台式机、平板电脑等。

基本 HTML 页面

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

在浏览器的 DOM PARSER 中它是什么样的？

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

如何访问 body 元素？

<script>
    var body = window.document.body;
</script>

怎么说“Hello World”？

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

最后整个 HTML 文件将如下所示

可选 Windows 打开记事本，将以下内容粘贴进去。然后将文件保存为“MyFileNewFile.html”（确保文件名以.html结尾）。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

最后，只需使用您喜欢的任何一个浏览器打开该文件，您就会看到“Hello World！”

DOM 的组成部分 Selenium

以下是 DOM 的主要组成部分 Selenium WebDriver：

窗口
文件
元素

从最外层开始，每个组件都位于树状结构的不同层级。

窗口

窗口是包含 DOM 中的文档对象的对象。它位于一切之上。

从给定文档获取窗口对象

<script>
      var window = document.defaultView;
</script>

在选项卡式环境中，每个选项卡都有自己的窗口对象。但是，如果想要捕获和实现 window.resizeTo 和 window.resizeBy 等事件，它们将应用于整个窗口，而不仅仅是选项卡。

DOM 中 Window 对象的属性

窗口.localStorage – 允许访问浏览器的本地存储。本地存储可用于存储和检索会话中的数据。

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

窗口打开器 – 获取打开此窗口的窗口对象的引用（通过单击链接或使用 window.open 方法）

Window 对象的有用方法

窗口.alert() – 显示带有消息的警告对话框。

<script>
		window.alert('say hello');
</script>

窗口对象暴露了许多有用的事件。我们将在高级主题下的“事件”部分讨论它们

文件

文档标志着 DOM 树的开始。文档是 DOM 中的第一个节点。它有多个方法和属性，其作用域适用于整个文档，例如： URLgetElementById、querySelector 等。

DOM 中文档对象的属性

文档.documentURI 和 文件。URL – 它们都返回文档的当前位置。但是，如果文档类型不是 HTML 文档。URL 不管用。

文档.activeElement 此方法返回 DOM 中处于焦点状态的元素。这意味着如果用户正在浏览某个页面，则会返回当前页面。ping 在文本框中，Document.activeElement 将返回对该文本框的引用。

文件名 – 用于读取或设置给定文档的标题。

文档对象的有用方法

Document.getElementById（字符串 id） 这是迄今为止 DOM 操作中最相关、最有用的方法。它用于在 DOM 树中查找元素。使用其唯一标识符查找区分大小写，例如，在以下示例中，“无法使用 IntroDiv、introdiv 或 iNtrodiv 等词语查找“元素”。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll（字符串选择器） 这是另一种广泛使用的方法，可以根据……选择一个或多个元素。 CSS选择器的规则（如果您熟悉 jQuery 的 $ 符号，它本身就使用了这种方法）。我们不会深入探讨 CSS 选择器。CSS 选择器是一组规则，您可以根据这些规则获取相似元素的列表。我们在“Hello World”部分已经使用过这种方法。

元素

下图显示了 Element 对象在 DOM 树中的位置，它位于 document 节点之下。

DOM 中的元素对象

元素是指文档 DOM 树中由节点表示的任何对象。与往常一样，元素对象本身只是一个连接。trac浏览器和 HTML 文档之间属性、方法和事件的交互。HTML 元素有多种类型，例如 HTMLElement、SVGElement、XULElement 等。本教程将只关注 HTMLElement。

DOM 中元素对象的属性

元素 ID – 此属性可用于设置或读取 HTML 元素的“ID”（唯一标识符）。ID 在 DOM 树中的元素之间必须是唯一的。如前所述，Document.getElementById 方法也使用 ID 来选择 DOM 树中的特定 Element 对象。

HTMLElement.contentEditable – 元素的 contentEditable 属性决定该元素的内容是否可编辑/可修改。此属性可以按照以下脚本所示进行设置。此属性还可用于确定给定元素是否可编辑。在任何 HTML 正文中尝试以下脚本，您会注意到您可以编辑正文的任何内容。

<script>
		document.body.contentEditable = true;
</script>

元素内部HTML – innerHTML 是另一个重要属性，我们使用它来访问元素内的 HTML 内容。它还用于设置元素的新 HTML 内容。它被广泛用于设置/更改数据字段的内容。例如，如果您希望您的网页每小时更新孟买市的温度，您可以每小时运行以下示例中的脚本。

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Element 对象的有用方法

HTML元素.blur() & HTML元素.focus() – blur 和 focus 方法分别用于从 HTML 元素中移除焦点或将焦点置于 HTML 元素上。这些方法最常用于在数据输入网页的文本框之间移动光标焦点。

Element.querySelectorAll – 此方法与前面讨论过的 document 对象的 querySelector 方法类似。不过，此方法会将其搜索范围限制在元素本身的后代内。

准确性说明： 以上代码块按原样重现。可运行的代码使用文件用小写字母 d 和 内部HTML 属性，而不是 setInnerHTML()。

在 DOM 中调试

开发人员工具 Google Chrome，Mozilla Firefox、Internet Explorer（10 或更高版本）或 Safari 允许在浏览器内部轻松调试。有时不同的浏览器对相同的 HTML 标记的解释不同，这时调试可以帮助您检查特定浏览器的 DOM 引擎对 DOM 的解释。

浏览器提示： Internet Explorer 已于 2022 年停用，因此其开发者工具现在位于…… Microsoft Edge以下步骤不变；按 F12 打开 DevTools。

现在，假设你想将温度值从 26^o摄氏到32^o上一个示例中的 C。我们将采取几个简单的步骤来实现这一点。此处显示的屏幕截图来自 Mozilla 的 Firefox– 但是，在所有其他浏览器中，步骤都是相同的。

使用浏览器打开 MyFileNewFile.html（或你在以上教程中为 HTML 文件指定的任何名称）
使用鼠标右键单击温度值 26^oC 并点击“检查元素”
请注意，您选择“检查元素”的元素会在浏览器中突出显示（调试器窗口通常出现在屏幕底部）
单击旁边的倾斜三角形来打开元素
选择要编辑的内容并双击它。您将获得更改文本的选项。按照下面动画中的指示进行操作。
注意 HTML 页面内容的变化。您现在可以关闭调试窗口。

请注意，您的更改只会保留在此会话中。只要您重新加载或刷新（按 F5）页面，更改就会恢复。这表明您没有更改实际的 HTML 源代码，而只是更改了浏览器的本地解释。

作为一个有趣的练习，尝试做以下事情。打开 www.facebook.com 在您的浏览器中并使用调试工具来获取以下结果 - 注意它是如何显示“我已经破解了 Facebook”。

执行该操作的结果如下图所示。

阅读和编辑节点涵盖静态页面。交互式页面还会对用户的操作做出反应。

DOM 事件

DOM 中的事件是什么？

事件是一种编程模型，其中用户触发（或浏览器页面生命周期触发）的事件以消息的形式广播。例如，当页面加载完毕时，它会触发 window.load 事件，同样，当用户单击按钮时元素的点击事件被触发。

这些信息可以被任何人拦截 JavaScript 代码，然后是一个开发者定义的操作可以实现。例如，假设您希望网页上的数字仅在用户点击按钮时才更新。您可以通过以下任何一种方法来实现——

将动作分配给 HTML 元素的 onclick 事件
使用 addEventListener 方法将操作分配给点击事件

方法1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

方法2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

DOM 中的故障排除

旧版 API 说明： 下面两个答案都使用了 document.write()。虽然它仍然会运行，但页面加载后调用它会清空文档。建议使用 console.log() 或 innerHTML。

问：如何知道某个元素是否存在？

A. 尝试使用任意选择器查找元素并检查返回的元素是否为空。参见下面的示例 –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

问：我收到 TypeError：document.getElementByID 不是一个函数……

A. 确保方法名称与 API 方法完全匹配。如上文所述，它是 getElementById，而不是 getElementByID。

问：children 和 childNodes 有什么区别？

A. 方法 children 为我们获取调用元素内所有元素的集合。返回的集合类型为 HTMLCollection。但是，方法 childNodes 为我们获取调用元素内所有节点的集合。将以下脚本添加到我们的示例中，看看有什么不同 -

childNodes 方法返回 14 个项目

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

虽然 children 方法只返回 7 个项目

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

问：我收到 Uncaught TypeError: Cannot read property 'innerHTML' of undefined…

A. 确保在初始声明后设置了调用其属性 innerHTML 的 HTMLElement 实例。此错误通常发生在以下情况下。请查看下一个代码块中如何避免此错误……

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

常见问题

Shadow DOM 是浏览器的一项功能，它为组件提供一个独立的子树，防止样式和脚本泄漏。Virtual DOM 是 React 和 Vue 等库使用的一种技术，它通过比较内存中的副本来最大限度地减少实际更新。

WebDriver 向浏览器发送一个定位器，浏览器遍历已解析的树，直到找到匹配项，然后返回一个 WebElement 句柄。定位器例如 id、name、CSS 选择器和 XPath 只是描述了对同一节点的不同搜索规则。

当目标元素具有唯一 ID 时，请使用 `getElementById`；它是速度最快的查找方法，并且返回一个节点。当匹配取决于类、属性或父子路径时，请使用 `querySelector` 或 `querySelectorAll`。

虽然它仍然会执行，但浏览器不建议这样做。在页面加载完成后调用 `document.write()` 会替换整个文档，并阻塞页面加载期间的解析。请使用 `console.log()` 来输出结果。 trac使用 innerHTML 插入内容。

DOM 模型负责页面内容的建模：包括 head、body 以及所有 <head> 标签。浏览器对象模型 (BOM) 则涵盖了浏览器环境，包括导航器、屏幕、位置和历史记录。window 对象是两者交汇之处。

Internet Explorer 已于 2022 年停用，因此其开发者工具现在位于其他平台内部。 Microsoft Edge工作流程不变：按 F12 或右键单击元素，选择“检查”，然后在打开的面板中编辑节点。

机器学习工具可以同时对多个节点属性进行评分，因此当类名或 ID 发生变化时，它们会重新匹配同一个元素，而不是匹配失败。自愈式测试平台正是基于这种机制，构建在普通的 DOM 查询之上。

副驾驶它会根据注释草拟事件监听器、查询选择器链和遍历循环，并且在常见模式上表现可靠。务必在实际页面上测试建议，因为它无法识别您的标记。

DOM 是什么 Selenium WebDriver？结构和全称

DOM 是什么 Selenium WebDriver？

理解 DOM 结构

基本 HTML 页面

在浏览器的 DOM PARSER 中它是什么样的？

如何访问 body 元素？

怎么说“Hello World”？

最后整个 HTML 文件将如下所示

DOM 的组成部分 Selenium

窗口

DOM 中 Window 对象的属性

Window 对象的有用方法

文件

DOM 中文档对象的属性

文档对象的有用方法

元素

DOM 中元素对象的属性

Element 对象的有用方法

在 DOM 中调试

DOM 事件

DOM 中的事件是什么？

方法1

方法2

DOM 中的故障排除

常见问题

总结一下这篇文章：

注册简报

DOM 是什么 Selenium WebDriver？

理解 DOM 结构

基本 HTML 页面

在浏览器的 DOM PARSER 中它是什么样的？

如何访问 body 元素？

怎么说“Hello World”？

最后整个 HTML 文件将如下所示

DOM 的组成部分 Selenium

窗口

DOM 中 Window 对象的属性

Window 对象的有用方法

相关文章

文件

DOM 中文档对象的属性

文档对象的有用方法

元素

DOM 中元素对象的属性

Element 对象的有用方法

在 DOM 中调试

DOM 事件

DOM 中的事件是什么？

方法1

方法2

DOM 中的故障排除

常见问题

总结一下这篇文章：

注册简报