2043 字

10 分钟

【WEB】浏览器和文本对象模型(DOM)

2023-05-17

学习笔记/Web技术

DOM

/

web

前言#

在上一章中，我们学习了 JavaScript 编程语言。尽管我们开发的程序由 Web 浏览器运行，但是它们与浏览器本身或者浏览器显示的文档之间具有相对很少的交互。在本章中，我们把注意力重点放在 DOM(Document Object Model，文档对象模型)上，DOM 是一个 API(应用程序编程接口)，定义了 JavaScript 程序如何 访问和操纵当前由浏览器显示的 HTML 文档

DOM 简介#

DOM 将整个文档结构抽象成一个树形结构，每个节点都代表着文档中的一个元素、属性或文本节点。通过 DOM API，开发者可以访问节点的层次结构，获取或修改节点的属性、内容等信息，也可以插入、移动或删除节点，从而实现动态地操作和更新文档结构。

我们通过一个例子（“Rollover” effect）来看 JavaScript 如何通过 DOM API 来控制文档：

下面的代码实现了：当鼠标没移动到图片上时，展示图片“CFP2.png”；若鼠标移动到图片上时，展示图片“CFP22.png”。

1
<html>
2
  <head>
3
    <title>Rollover.html</title>
4
    <script type="text/javascript" src="rollover.js">
5
    </script>
6
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
7
  </head>
8
  <body>
9
    <p>
10
      <img id="img1" src="CFP2.png" alt="flower pot"
11
           height="86" width="44"
12
           onmouseover="swap('img1', 'CFP22.png');"
13
           onmouseout="swap('img1', 'CFP2.png');" />
14
    </p>
15
  </body>
16
</html>

1
function swap(eltId, URL) {
2
  var elt = window.document.getElementById(eltId);
3
  elt.src = URL;
4
  return;
5
}

我们看到 HTML 文件中的 meta 标签：<meta http-equiv="Content-Script-Type" content="text/javascript" />

它的作用是告诉浏览器该网页中的脚本类型为 JavaScript。这个标签的内容会被浏览器解析，以便正确地处理网页中的 JavaScript 代码。http-equiv 属性被设置为 “Content-Script-Type”，用于指定 HTML 文档中 内部事件属性 的脚本语言。内在事件属性，比如 onclick 或 onload，是 HTML 属性，用于定义在特定事件发生时要执行的 JavaScript 代码。

对于接下来在 img 元素中的两个内在事件属性：

onmouseover="swap('img1', 'CFP22.png');"
onmouseout="swap('img1', 'CFP2.png');"

它们调用了 swap() 函数，这个函数在 JavaScript 中。swap() 函数的第一个参数为 eltId，表示元素的 id，用于定位执行函数的具体标签。第二个参数为需要更换的图片的 URL，这里是一个相对地址。

在 JavaScript 中，document.getElementById(eltId) 中的 getElementById 是 DOM API 的一部分，它允许开发人员通过文档中元素的 ID 属性来获取对该元素的引用。因为元素 ID 是唯一的，所以这种方法比传递名字要容易定位。

我们可以看到实际结果是：浏览器最初显示相对 URL CFP2.png 上的图像。当把鼠标移到该图像上时，就会用位于 URL CFP22.png 上的图像替换这幅图像。当移开鼠标时，恢复显示原始图像。

DOM 技术定义了两个宿主对象（host object），分别是 Document 宿主对象和 Element 宿主对象。

Document 宿主对象提供了访问 HTML 文档的 方法和属性，可以通过该对象获取文档的根节点、head 和 body 等元素，也可以获取文档的 title、URL、cookie 等信息。开发者可以通过 Document 对象对整个文档进行操作和控制。
而 Element 宿主对象则用于访问 HTML 文档中的元素，包括标签、属性和文本节点等。Element 对象提供了一系列的方法和属性，用于获取和修改元素的属性、文本内容、样式等信息，也可以通过 Element 对象进行事件处理、动态创建和删除元素等操作。

通过这两个宿主对象，开发者可以在 JavaScript 中轻松地访问和操作 HTML 文档中的各个元素和节点，实现动态地更新和控制文档内容的效果。

内部事件处理#

内部事件（也称为 DOM 事件）是指在 HTML 文档中发生的事件，例如用户单击按钮、鼠标滚动、键盘按下等。这些事件是通过 DOM 技术来实现的，当用户与 HTML 文档中的元素进行交互时，浏览器会自动触发相应的内部事件。它们可以作为属性放在标签里面。

例如有如下内部事件属性（常见事件举例）：

像之前的例子一样，无论何时使用一个内部事件属性，还应该在文档的 head 中包含一个 meta 元素。一般来讲，meta 元素用于指定通常可以在包含 HTML 文档的响应消息的 HTTP 头部字段中看到的信息：http-equiv 用于指定 HTTP 头部字段的名称，它的值是 content 的内容。meta 元素定义的特定的 HTTP 头部字段是 Content-Script-Type，它用于为文档内的脚本指定默认的语言；content 的内容为 "text/javascript" 告诉浏览器用 JavaScript 编写内部事件属性。

修改元素样式#

DOM 访问通常用于更改 HTML 文档元素的样式，来响应用户发起的事件。

例如，考虑一个简单的导航栏（navbar），它包含一个链接表格，放在其他内容的左边。使用 JavaScript 和 DOM，当把鼠标移到导航栏中各个项上时，很容易更改它们的外观。

初始状态如图：

我们想要实现的是，当鼠标移动到一项的时候该 td 元素的背景色为银色，否则为灰色。

这个实现起来和之前的例子差不多，都是使用了两个内部事件 onmouseover 和 onmouseout。下面为 td 元素的代码：

1
<td onmouseover="highlight(this);"
2
    onmouseout="lowlight(this);">
3
  <a href="http://www.example.org">Products</a>
4
</td>

当鼠标悬停在该单元格上时，会触发 JavaScript 函数 highlight()，该函数会高亮显示单元格（变银色）。当鼠标移开单元格时，会触发另一个 JavaScript 函数 lowlight()，该函数会取消高亮显示（变灰色）。此时这两个函数的参数为 this 指针，是当前元素（td）的别名（Reference）。那么我们的 JavaScript 代码应该写为：

1
function highlight(element) {
2
  element.style.backgroundColor = "silver";
3
  return;
4
}

代码其中，参数 element 是元素实例的一个别名，故我们可以直接使用它。修改背景，我们只需要修改 style 属性即可。

对于 backgroundColor 它实际上是 style 对象的属性，对应一个 CSS 样式。这里我们的背景颜色在 CSS 中应该为：background-color，它带有一个连字符，转换为属性调用的时候我们应该使用驼峰形式命名，即 backgroundColor。如果 CSS 对应的样式没有连字符，那么就保留它原名即可，例如 color，转换成属性调用也写作 color。

当然，上述的函数写法中不包含 DOM API 的调用，因为我们仅仅是修改了元素属性。下面是使用 DOM 方法写的 lowlight 函数。

1
function lowlight(element) {
2
  element.style.setProperty("background-color", "gray", "");
3
  return;
4
}

setProperty() 是一个 DOM 方法，用于设置 CSS 属性。它有三个参数：

property：要设置的 CSS 属性的名称，例如 "background-color"。
value：要设置的 CSS 属性的值，例如 "gray"。
priority：可选参数，用于设置 CSS 属性的优先级。它应该为空字符串或者是 !important 关键字。

使用 setProperty() 的好处是可以清晰地设置 CSS 样式。除此之外，我们还可以增加一个判断，看看当前颜色是不是灰的，例如：

1
if (element.style.getPropertyValue("background-color") == "gray")

这是使用了 DOM 的方法，当然也可以用之前的 style 对象的属性比较方式：

1
if (element.style.backgroundColor == "gray")

后记#

本文介绍了 DOM（文档对象模型）及其在 JavaScript 中的应用。DOM 将整个文档结构抽象成树形结构，通过 DOM API，开发者可以访问和操纵文档中的元素、属性和文本节点，实现动态地操作和更新文档结构。文章以一个例子展示了如何通过 DOM API 控制文档中的元素，以及内部事件处理的方法。同时解释了使用 DOM 修改元素样式的过程，通过 JavaScript 和 DOM 可以轻松地访问和操作 HTML 文档中的各个元素和节点，实现动态地更新和控制文档内容的效果。