分類
數字趨勢

网站的隐藏英雄:了解DOM

“ DOM”是在前端Web设计和开发中经常使用的术语。它代表“文档对象模型”,是网站的基本组成部分。

与DOM一样重要,许多人不了解它。实际上,您可以对网站进行编程多年,而无需了解太多信息。但是随着前端技术的发展,了解DOM变得越来越重要。

了解DOM合同

在面向对象的编程中,有一个称为接口的构造。接口本身不会做任何事情。而是创建合同。它说只要遵循接口协定的规则,任何事物都可以与其他事物进行交互。

拥有界面可以使程序的任何部分以受控和可预测的方式与程序的任何其他部分进行交互。该接口还使程序的一部分可以与其他任何部分一起使用,即使它对该接口另一侧的程序部分一无所知。

接口就像墙上的电源插座。只要电压正确,您的设备就无需知道电源来自何处。拐角处的变压器不需要知道它的功率。它只需要以适当的电压向您的房屋供电。

DOM是网页与创建和更改它的代码之间的接口层。当您访问网站时,您会看到浏览器如何呈现该网站的DOM。编写HTML时,实际上是在使用DOM的API(编程接口)进行编程。

DOM标准由名为World Wide Web Consortium或W3C的组织维护。他们创建了定义DOM标准的非常详细的文档

在这一点上,您可能认为他们做得不好。毕竟,由跨浏览器兼容性问题引起的问题太多了。

问题不在于标准。它与浏览器本身有关。许多浏览器在其DOM实施中添加了不符合W3C标准的功能。有时,该功能变得流行起来并被实现为DOM标准,从而迫使其他浏览器迎头赶上。

另一个问题是,某些人仍在使用未内置最新DOM标准的旧版浏览器。有时,浏览器无法正确实施该标准。

DOM的结构

您可以将DOM想象成一棵树。 <html>元素是主干,其中的所有元素都是分支。当您将HTML元素嵌套在父元素内时,实际上是在该分支之外创建分支。每个分支的适当术语是“节点”。

树结构在节点之间创建逻辑关系,例如家谱。每个节点都可以有一个父节点和一个祖先节点。他们可以有兄弟姐妹。节点可以有子代和子代。当使用JavaScript和CSS与DOM交互时,用这些术语进行思考会大有帮助。

HTML如何与DOM交互

通过使用文档接口创建文档对象来定义DOM。 HTML代码是创建文档的最直接方法。 HTML提供了一种简单的方法来定义文档,而无需进行传统编程。

如果您刚刚开始使用HTML,请通过以下五个技巧来熟悉HTML。

HTML比传统的编程语言更简单,更宽容。对于初学者来说,它使与DOM的交互变得容易。

CSS如何与DOM交互

一旦HTML构建了DOM文档,CSS就可以为该文档设置样式。为此,它需要能够找到要设置样式的元素。它以几种方式做到这一点。

您可以通过按名称引用元素来访问文档节点,例如<div><p> 。 CSS还可以通过引用ID名称直接访问元素。类样式应用于多个元素,因此您可以同时对所有元素进行样式设置。相反,id样式仅将更改应用于单个元素。

您还可以使用CSS访问族树结构并进行微调访问以进行更多控制。 CSS选择器使您可以选择多个元素,并提供了一些技巧来查找它们。您可以按孩子的祖先,班级组合等搜索孩子。

JavaScript如何与DOM交互

JavaScript具有对文档的最大控制权,因为JavaScript是一种包含对象,流控制,变量等的实际编程语言。DOM提供了多个接口,这些接口使JavaScript能够操纵文档,元素和其他节点。

相关:什么是JavaScript?

JavaScript可以添加和删除节点以及更改其样式。 JavaScript可以监视文档中的事件,例如将鼠标悬停在元素上,单击并按下键。

JavaScript可以以与CSS非常相似的方式搜索和导航文档树。能够通过id和class查找元素。它可以检索子元素列表作为数组。

Web开发和DOM的未来

自早期以来,互联网发生了很大变化。在早期,JavaScript主要用于特殊效果和简单的数据显示。大多数网站只不过是数字手册。不过,AJAX改变了这一切。

AJAX允许网站即时更新从服务器显示的数据,而无需重新加载页面。在AJAX之前,仅在重新加载页面或用户导航到另一个页面时才能看到对数据的所有更改。

在AJAX之后,Web应用程序变得越来越流行。互联网不再是简单的静态网站和一些功能强大的应用程序(例如eBay)的集合。现在,互联网几乎是第二个操作系统,其中包含功能强大的应用程序。

随着用户期望的增长,技术必须跟上发展。 JavaScript不是最强大或最快的语言。它还遭受一些问题,例如浮点数错误,这使开发人员不太希望使用它。这是WebAssembly出现的地方。

WebAssembly为浏览器带来了本机代码的许多好处,包括提高了速度和更好的硬件访问。它将允许程序员使用其他语言来构建C ++和Rust这样的网站。

但是,即使WebAssembly将带来巨大的改进,但DOM仍将存在,在代码和浏览器中显示的内容之间提供一致的接口。