Javascript对象, BOM对象, DOM对象的区别和理解

最新推荐文章于 2025-05-28 16:46:20 发布

Byte_Dance

最新推荐文章于 2025-05-28 16:46:20 发布

阅读量1.6k

点赞数 1

分类专栏： JS

JS 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了JavaScript在浏览器环境中的运行机制，包括全局对象window的作用及使用，文档对象模型（DOM）和CSSOM的基本概念，以及浏览器对象模型（BOM）提供的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器环境，规格

JavaScript语言最初是为Web浏览器创建的。从那以后，它发展成为一个有很多用途和平台的语言。

平台可以是浏览器或网络服务器，也可以是其他主机。他们每个人都提供平台特定的功能。JavaScript规范称这是一个主机环境。

主机环境除语言核心以外还提供平台特定的对象和功能。Web浏览器提供了控制网页的手段。Node.JS提供了服务器端的功能，等等。

下面是浏览器运行JavaScript时的一个鸟瞰图：

有一个叫做“根”的对象window。它有两个角色：

首先，它是JavaScript代码的全局对象，如全局对象一章中所述。
其次，它代表了“浏览器窗口”，并提供了控制它的方法。

例如，在这里我们用它作为一个全局对象：

 
      function sayHi() {
  alert("Hello");
}

// global functions are accessible as properties of window
window.sayHi();

在这里，我们将其用作浏览器窗口，以查看窗口高度：

 
      alert(window.innerHeight); // inner window height

还有更多特定于窗口的方法和属性，我们稍后会介绍它们。

文档对象模型（DOM）

该document对象允许访问页面内容。我们可以使用它在页面上更改或创建任何内容。

例如：

 
      // change the background color to red
document.body.style.background = "red";

// change it back after 1 second
setTimeout(() => document.body.style.background = "", 1000);

在这里，我们用了document.body.style，但还有很多。说明书中描述了属性和方法。偶然有两个工作组开发它：

W3C - 文档位于https://www.w3.org/TR/dom。
WhatWG，发布在https://dom.spec.whatwg.org。

碰巧，这两个团体并不总是同意，所以我们有两套标准。但他们处于紧密的联系之中，并最终融合在一起。因此，您可以在给定的资源上找到的文档非常相似，大约有99％的匹配。有很小的差异，你可能不会注意到它们。

就我个人而言，我觉得https://dom.spec.whatwg.org使用起来更愉快。

在古代，根本没有标准 - 每个浏览器都实现了它想要的。所以不同的浏览器为同一个事物设置了不同的方法和属性，开发人员不得不为每个编写不同的代码。黑暗，凌乱的时代。

即使现在我们有时也可以遇到使用浏览器特定属性的旧代码，并且解决不兼容的问题。但在本教程中，我们将使用现代化的东西：在真正需要这些东西之前，没有必要去学习旧的东西（机会很高，否则）。

然后出现了DOM标准，试图让大家达成一致。第一个版本是“DOM Level 1”，然后是DOM Level 2，然后是DOM Level 3，现在是DOM Level 4. WhatWG组的人厌倦了版本，只是调用“DOM”，没有数。所以我们会做。

DOM规范解释了文档的结构并提供对象来操作它。有非浏览器的仪器也使用它。

例如，下载HTML页面并处理它们的服务器端工具。他们可能只支持DOM规范的一部分。

CSS规则和样式表的结构不像HTML。所以有一个单独的CSSOM规范，解释了如何将它们表示为对象，如何读写它们。

当我们修改文档的样式规则时，CSSOM与DOM一起使用。但实际上，CSSOM很少需要，因为通常CSS规则是静态的。我们很少需要从JavaScript中添加/删除CSS规则，所以我们现在不会介绍它。

BOM（HTML规范的一部分）

浏览器对象模型（Browser Object Model，BOM）是浏览器（主机环境）提供的附加对象，用于处理除文档之外的所有内容。

例如：

导航器对象提供有关浏览器和操作系统的背景信息。有许多属性，但最广为人知的有两个：navigator.userAgent- 关于当前的浏览器，navigator.platform- 关于平台（可以帮助区分Windows / Linux / Mac等）。
位置对象允许读取当前URL并将浏览器重定向到新的URL。

以下是我们如何使用该location对象：

 
      alert(location.href); // shows current URL
if (confirm("Go to wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}