[Web自动化] HTML元素及DOM元素

3.3 HTML元素及DOM元素

3.3.1 HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

例如：

<p>I Love You</p>

注：这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。元素内容是：I Love You。

3.3.2 DOM 元素

DOM元素是指文档对象模型（Document Object Model，简称DOM）中的对象，它表示HTML或XML文档中的一个节点。每个DOM元素都是一个对象，可拥有方法和属性。

例如，一个链接（<a>元素）是一个对象，拥有诸如getAttribute()（方法）和href（属性）等。DOM将文档解析为一个由节点和对象组成的结构集合，这种结构集合允许程序和脚本动态地访问和更新文档的内容、结构和样式。

在HTML文档中，DOM元素通常与HTML标签相对应。例如，一个<div>标签在DOM中会被表示为一个div元素对象，你可以通过JavaScript来访问和操作这个对象，比如改变它的内容、样式或者添加事件监听器等。

DOM元素具有层次结构，与HTML文档的嵌套结构相对应。例如，如果一个<div>标签内部包含一个<p>标签，那么在DOM中，p元素会是div元素的一个子节点。这种层次结构使得我们可以方便地通过父节点、子节点或兄弟节点等关系来访问和操作DOM元素。

总的来说，DOM元素是构成DOM树的基本单元，它们代表了HTML或XML文档中的各个部分，并提供了与这些部分进行交互的接口。

3.3.2.1 DOM元素属性

innerHTML

• 定义 ：innerHTML属性返回指定元素的HTML内容，即元素内部的子节点。

• 用途 ：常用于读取或修改元素的内部HTML。比如，你可以读取一个div标签内的HTML内容，或者将新的HTML内容插入到一个元素中。

• 示例 ：

  var div = document.getElementById("myDiv");
  var content = div.innerHTML; // 获取div的内部HTML内容
  div.innerHTML = "<p>New content</p>"; // 将新的HTML内容设置到div中

outerHTML

• 定义 ：outerHTML属性返回指定元素的HTML内容，包括元素本身和它的所有子节点。

• 用途：用于获取或设置整个元素的HTML，包括元素的开始标签和结束标签。这在需要替换整个元素时非常有用。

• 示例 ：

  var div = document.getElementById("myDiv");
  var content = div.outerHTML; // 获取div的完整HTML，包括开始和结束标签
  div.outerHTML = "<div>New content</div>"; // 替换div为新的div

区别和联系：

• 内容范围 ：innerHTML仅包含元素的内部内容，不包括元素的开始标签和结束标签；而outerHTML则包含整个元素，包括开始标签、结束标签以及它们之间的所有内容。
• 使用场景 ：
  • 使用innerHTML时，你通常只关心元素内部的内容，比如修改一个段落的内容或添加新的文本节点。
  • 使用outerHTML时，你可能会需要替换整个元素，或者获取整个元素的HTML代码。
• 安全性 ：使用innerHTML时需要特别注意跨站脚本（XSS）攻击的风险，因为直接将用户输入的内容插入到HTML中可能会执行恶意脚本。因此，通常建议使用textContent属性来设置文本内容，以避免XSS攻击。

3.3.2.2 DOM元素状态

在网页设计中，CSS（层叠样式表）允许我们根据元素的不同状态来改变其样式。这些状态通常与用户的交互有关，增强了网页的用户体验。
active：：激活

当用户与元素进行交互（如点击鼠标按钮但尚未释放）时，元素处于active状态。这通常用于提供视觉反馈，告诉用户他们已经选择了该元素，并且正在与之交互。
hover：：悬停

当用户将鼠标指针悬停在元素上方时，元素处于hover状态。这是改变元素样式以吸引用户注意或提供额外信息的常用方式。
focus：：聚焦

当元素获得焦点时（例如，用户通过点击或使用Tab键导航到它时），它处于focus状态。这对于提高可访问性特别重要，因为它允许视觉障碍用户通过键盘与网页上的元素进行交互。
visited：：已访问

对于<a>（链接）元素，当用户已经访问过该链接指向的页面时，链接处于visited状态。这允许通过改变链接的颜色或样式来区分已访问和未访问的链接。
focus-within：：内部被激活

当元素或其任何子元素获得焦点时，该元素处于focus-within状态。这可以用于改变父元素的样式，以指示其子元素之一当前具有焦点。这在设计复杂的表单或具有嵌套元素的界面时特别有用。
focus-visible：

（注意：这不是一个标准的CSS伪类，但它是浏览器行为的一部分，并可通过CSS控制）

focus-visible是一种旨在改善可访问性和用户体验的浏览器行为，它仅当焦点是通过键盘导航获得时（而非通过鼠标点击）才显示焦点指示器。这有助于减少视觉上的混乱，因为用户通常不需要看到通过鼠标点击获得的焦点指示器。然而，直接通过CSS控制focus-visible的行为较为复杂，通常涉及使用:focus-visible伪类（如果浏览器支持）或JavaScript来模拟此行为。

请注意，focus-visible并不是所有浏览器都原生支持的CSS伪类，但它是未来CSS规范的一部分，并且可以通过JavaScript库（如focus-visible polyfill）在现有浏览器上实现类似的功能。

3.3.3 HTML 注释

在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。

<!-- 在此处写注释 -->

注：浏览器不会显示注释，但是能够帮助开发者记录。

<!doctype html>
<html>
<body>
 <!--这是一段注释。注释不会在浏览器中显示。-->
 <p>这是一段普通的段落。</p>
</body>
</html>

3.3.4 空格字符

在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果想使用空格的话可以使用  字符。

<body>
<p>这是一段文字&nbsp;&nbsp;&nbsp;&nbsp;用了空格字符</p>
</body>