DOM 简介

介绍

文档对象模型,通常被称为DOM,是使网站互动的重要组成部分,它是一个允许编程语言操纵网站的内容,结构和风格的界面。

几乎每当一个网站执行一个操作时,例如在图像幻灯片中旋转,在用户试图提交不完整表单时显示错误,或移动导航菜单时,这是JavaScript访问和操纵DOM的结果。

<$>[注] **注:**虽然 DOM 语言是无知的,或被创建为独立于特定编程语言,但在整个资源中,我们将专注于并参考 JavaScript 的 HTML DOM 实现

前提条件

为了有效地理解 DOM 以及它如何与 Web 工作有关,必须具备 HTML和 CSS的现有知识,并且熟悉基本的 JavaScript 语法和代码结构(https://andsky.com/tech/tutorials/understanding-syntax-and-code-structure-in-javascript)也是有益的。

什么是家?

在最基本的层面上,网站由HTML文档组成,您使用的浏览器是解释HTML和CSS的程序,并将风格,内容和结构转化为您看到的页面。

除了分析HTML和CSS的风格和结构外,浏览器还创建了一种被称为文档对象模型的文档表示。

JavaScript是一个交互式的语言,通过创建一个非常基本的网站,更容易理解新的概念,然后创建一个index.html文件并将其保存到一个新的项目目录中。

 1[label index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4
 5  <head>
 6    <title>Learning the DOM</title>
 7  </head>
 8
 9  <body>
10    <h1>Document Object Model</h1>
11  </body>
12
13</html>

这个代码是新网站骨骼的熟悉的HTML源,它包含一个网站文档的绝对最重要的方面 - 一个Doctype和一个html标签,里面嵌入了头部和身体。

为了我们的目的,我们将使用Chrome浏览器,但你可以从其他现代浏览器获得类似的输出。在Chrome中,打开index.html。你会看到一个简单的网站,我们的标题说文档对象模型。右键点击页面上的任何地方,选择检查。

在 Elements 选项卡中,你会看到 DOM。

DOM Example

在这种情况下,当扩展时,它看起来与我们刚刚写的HTML源代码完全相同 - 一个文档类型,以及我们添加的其他几个HTML标签。

文件对象

文档对象是一个内置的对象,它具有许多属性和方法,我们可以使用它们来访问和修改网站。为了了解如何使用DOM,您必须了解对象在JavaScript中是如何工作的。

在 index.html上的开发人员工具中,移动到 Console 选项卡,在控制台中输入文档,然后按ENTER。

1document;

 1[secondary_label Output]
 2#document
 3<!DOCTYPE html>
 4<html lang="en">
 5
 6  <head>
 7    <title>Learning the DOM</title>
 8  </head>
 9
10  <body>
11    <h1>Document Object Model</h1>
12  </body>
13
14</html>

输入文档并以其他方式直接在控制台工作,通常不会是除调试之外的任何事情,但它有助于确切地确定文档对象是什么以及如何修改它,正如我们下面所述。

DOM 和 HTML 源代码有什么区别?

目前,有了这个例子,看起来 HTML 源代码和 DOM 是完全相同的,有两种情况下,浏览器生成的 DOM 将与 HTML 源代码不同:

DOM 由客户端 JavaScript 修改 * 浏览器自动修复源代码中的错误

让我们演示一下如何通过客户端JavaScript来修改DOM,在控制台中输入以下内容:

1document.body;

控制台将以此输出响应:

1[secondary_label Output]
2<body>
3  <h1>Document Object Model</h1>
4</body>

document是对象,body是我们用点符号访问的对象的属性,将document.body提交到控制台将body元素和其内部的一切输出。

在控制台中,我们可以更改本网站上身体对象的某些活性属性。我们将编辑风格属性,将背景颜色更改为fuchsia。

1document.body.style.backgroundColor = 'fuchsia';

输入和提交上述代码后,您将看到现场更新到网站,因为背景颜色发生变化。

DOM Live Modification

切换到 Elements 选项卡或再次键入document.body在控制台中,您将看到 DOM 已更改。

1[secondary_label Output]
2<body style="background-color: fuchsia;">
3  <h1>Document Object Model</h1>
4</body>

<$>[注] **注:**为了更改背景色CSS属性,我们必须在JavaScript中键入背景色。

我们输入的JavaScript代码,将fuchsia分配给body的背景颜色,现在是DOM的一部分。

但是,右键单击页面并选择查看页面源。您会注意到网站的源 not 包含我们通过JavaScript添加的新风格属性。网站的源不会改变,也不会受到客户端JavaScript的影响。

另一个例子是,DOM可能具有与HTML源代码不同的输出,当源代码存在错误时。一个常见的例子是表标签 - 一个表内部需要一个tbody标签,但开发人员通常无法将其纳入HTML中。

结论

在本教程中,我们定义了DOM,访问了文档对象,使用JavaScript和控制台更新了文档对象的属性,并探讨了HTML源代码和DOM之间的差异。

有关 DOM 的更多详细信息,请参阅 Mozilla 开发者网络上的 Document Object Model (DOM) 页面。

在下一个教程中,我们将审查重要的HTML术语,了解DOM树,发现节点是什么,了解最常见的节点类型,并开始使用JavaScript创建交互式脚本。