JavaScript - 浏览器对象模型

JavaScript 中的浏览器对象模型 (BOM) 是指浏览器提供的用于与其交互的对象。使用这些对象，您可以操作浏览器的功能。例如，您可以获取浏览器历史记录和窗口大小，导航到不同的 URL 等。

浏览器对象模型并非标准化的。它取决于您使用的浏览器。

这里，我们列出了浏览器对象模型的所有对象及其描述 -

• Window - "window"对象表示当前浏览器窗口。您可以使用它来操作浏览器窗口。

• Document - "document"对象表示当前在浏览器窗口中打开的网页。您可以使用它来自定义文档的属性。

• Screen − 提供有关用户设备屏幕的信息。

• History − 提供浏览器的会话历史记录。

• Navigator − 用于获取浏览器的信息，例如默认语言等。

• Location − Location 对象用于获取 URL 信息，例如当前网页的主机名。

• Console − 控制台对象允许开发人员访问浏览器的控制台。

JavaScript Window 对象

JavaScript window 对象代表浏览器的窗口。我们可以使用 window 对象的各种方法和属性来操作当前浏览器窗口。例如，显示警告框、打开新窗口、关闭当前窗口等。

所有 JavaScript 全局变量 都是 window 对象的属性。所有 全局函数 都是 window 对象的方法。

上面列出的其他对象，例如 document、screen、history 等，都是 window 对象的属性。我们可以将这些对象作为 window 对象的属性来访问。我们也可以通过引用 window 对象来访问它们。查看以下示例代码片段来访问 document 对象

window.document.write("Welcome to Tutorials Point");

或者不使用 window 对象 -

document.write("Welcome to Tutorials Point");

window 对象的 innerHeight 和 innerWidth 属性用于访问浏览器窗口的高度和宽度。我们将在下一章详细学习 JavaScript window 对象。

JavaScript document 对象

document 对象 是 JavaScript window 对象的一个​​属性。整个 HTML 文档表示为一个 document 对象。document 对象构成 HTML DOM。它是 HTML 文档的根节点。

document 对象可以通过 window.document 或 document 访问。

document 对象提供了许多属性和方法来访问和操作 HTML 元素。其中一个方法是 document.getElementById()，它使用 id 访问 HTML 元素。

我们可以使用 getElementById() 方法访问 id 为"text"的元素并对其进行操作

示例

<html>
<body>
   <div id ="text">This text will be changed. </div>
   <script>
      // 以文本形式访问 id 的元素
      const textDiv = document.getElementById("text");
      // 改变此元素的内容
      textDiv.innerHTML = "The text of this DIV is changed.";
   </script>
</body>
</html>	

输出

The text of this DIV is changed.

JavaScript screen 对象

在 JavaScript 中，screen 对象是 window 对象的一个​​属性。它为我们提供了可用于获取设备窗口屏幕信息的属性。我们可以通过 window.screen 或 screen 访问屏幕对象。

要获取设备屏幕的宽度和高度(以像素为单位)，我们可以使用 screen.width 和 screen.height 属性。

示例

<html>
<body>
<div id ="width">Width of the device screen is </div>
<div id ="height">Height of the device screen is </div>
<script>
   document.getElementById("width").innerHTML += screen.width + " px.";
   document.getElementById("height").innerHTML += screen.height + " px.";
</script>
<p> The above result may be different for different device.</p>
</body>
</html>

输出

Width of the device screen is 1536 px.
Height of the device screen is 864 px.
The above result may be different for different device.

JavaScript History 对象

在 JavaScript 中，history 对象也是 window 对象的一个​​属性。它包含当前会话中访问过的 URL 列表。history 对象提供了一个接口来操作浏览器的会话历史记录。

JavaScript 历史记录对象可以通过 window.history 或 history 访问。我们可以使用 history 对象的方法浏览历史记录列表中的 URL。例如，要返回历史记录列表中的上一页/URL，我们可以使用 history.back() 方法。

JavaScript Navigator 对象

JavaScript navigator 对象也是 window 对象的一个​​属性。使用"navigator"对象，您可以获取浏览器版本和名称，并检查浏览器中是否启用了 Cookie。我们可以使用 window.navigator 访问导航器对象。我们也可以不使用 window 前缀来访问它。

JavaScript Location 对象

JavaScript 的"location"对象包含各种属性和方法，用于获取和操作浏览器位置信息(即 URL)。它也是 JavaScript window 对象的一个​​属性。

我们可以使用 location 对象的属性和方法来操作 URL 信息。例如，要从当前 URL 获取主机名，我们可以使用 window.location.host 或直接使用 location.host。主机名是 location 对象的一个​​属性。

示例

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
	  "The host of the current location is: " + location.host;
   </script>
</body>
</html>

输出

The host of the current location is: www.cainiaomax.com

JavaScript Console 对象

JavaScript console 对象允许我们访问浏览器的调试控制台。它是 JavaScript window 对象的一个​​属性。可以使用 window.console 或 console 来访问它。

console 对象提供了不同的方法，例如 console.log()。console.log() 方法用于在调试控制台中显示消息。

下一步是什么?

我们已经在单独的章节中详细介绍了上述每个对象。