JavaScript - 浏览器对象模型

上一页
下一页

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

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

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

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

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

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

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

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

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

  • Console - 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>
      // Access the element with id as text
      const textDiv = document.getElementById("text");
      // Change the content of this element
      textDiv.innerHTML = "The text of this DIV is changed.";
   </script>
</body>
</html>

输出

The text of this DIV is changed.

JavaScript 屏幕对象

在 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 历史对象

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

可以使用window.history或仅history访问 JavaScript history 对象。我们可以使用 history 对象的方法来导航历史列表中的 URL。例如，要转到历史列表中的上一页/URL，我们可以使用history.back()方法。

JavaScript 导航器对象

JavaScript navigator 对象也是window对象的一个属性。使用“navigator”对象，您可以获取浏览器版本和名称，并检查浏览器中是否启用了 cookie。我们可以使用window.navigator访问 navigator 对象。我们也可以在不使用 window 前缀的情况下访问它。

JavaScript 位置对象

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.tutorialspoint.com

JavaScript 控制台对象

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

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

下一步是什么？

我们在单独的章节中提供了有关上述每个对象的详细信息。

打印页面
上一页
下一页
广告