DOM 是什么 Selenium WebDriver：结构、全称

由： Krishna 伦塔 Krishna 伦塔
Hours 更新

DOM 是什么 Selenium WebDriver？

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

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

本教程旨在介绍 HTML 文档结构的基本概念以及如何使用 Java脚本。本教程中我们将介绍以下主题：

理解 DOM 结构

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

  1. 开发无需刷新整个页面即可不断更新的内容——例如用户投资组合中所有股票的当前价格
  2. 开发高级用户交互，例如动态添加或修改内容——例如向投资组合中添加更多股票的能力
  3. 开发可由用户定制的内容——例如，可以更改布局，以便共同基金投资组合出现在股票投资组合之前
  4. 在您的网站中开发响应式内容，从而使您的网站自动适应不同的媒体屏幕，即 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>

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

文件

Document 标志着 DOM 树的开始。Document 是 DOM 中的第一个节点。它有多种方法和属性，其范围适用于整个文档，如 URL、getElementById、querySelector 等。

DOM 中文档对象的属性

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

文档.activeElement – 此方法返回 DOM 中处于焦点的元素。这意味着如果用户正在文本框中输入内容，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”部分使用过这种方法。

元素

DOM 中的元素对象

DOM 中的元素对象

元素是文档 DOM 树中节点所表示的任何对象。与往常一样，元素对象本身只是浏览器和 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 方法类似。不过，此方法会将其搜索范围限制在元素本身的后代内。

在 DOM 中调试

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

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

  1. 使用浏览器打开 MyFileNewFile.html（或你在以上教程中为 HTML 文件指定的任何名称）
  2. 使用鼠标右键单击温度值 26oC 并点击“检查元素”

    在 DOM 中调试

  3. 请注意，您选择“检查元素”的元素会在浏览器中突出显示（调试器窗口通常出现在屏幕底部）

    DOM 引擎中的调试

  4. 单击旁边的倾斜三角形来打开元素

    DOM 中的调试过程

  5. 选择要编辑的内容并双击它。您将获得更改文本的选项。按照下面动画中的指示进行操作。

    在 DOM 中调试

  6. 注意 HTML 页面内容的变化。您现在可以关闭调试窗口。

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

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

DOM 中的调试过程

DOM 事件

DOM 中的事件是什么？

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

这些信息可以被任何人拦截 JavaScript 代码，然后可以采取开发人员定义的操作。例如，您希望只有当用户单击按钮时，网页上的数字才会更新。您可以通过以下任何一种方法来实现 -

  1. 将动作分配给 HTML 元素的 onclick 事件
  2. 使用 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 中的故障排除

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

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';
}

结语

  • 在本教程中，我们了解了什么是 DOM，以及理解它是构建动态网页所必需的概念。
  • 我们还涉及了 DOM 元素的类型，例如 Window、Document 和 Element。
  • 我们学习了每种类型的一些有用的 DOM 方法和属性。
  • 我们看到大多数浏览器都提供开发人员工具来操作互联网上的任何网页，从而学习如何调试和解决我们自己的网站的问题。
  • 我们还简要介绍了 DOM 事件机制。
  • 最后，我们介绍了 DOM 中的几个故障排除项目。
  • 互联网上充斥着有关 DOM 的资源。Mozilla 的开发者网络提供了最好的最新参考资料之一。请参阅 – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model