JavaScript - 浏览器对象模型

上一页
下一页

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

Browser 对象模型未标准化。这取决于您使用的浏览器。

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

  • Window − 'window' 对象表示当前浏览器窗口。您可以使用它来操作浏览器窗口。
  • Document − 'document' 对象表示浏览器窗口中当前打开的网页。您可以使用它来自定义文档的属性。
  • Screen − 提供有关用户设备屏幕的信息。
  • History - 它提供浏览器的会话历史记录。
  • Navigator − 用于获取浏览器的信息，如默认语言等。
  • Location - Location 对象用于获取 URL 信息，例如当前网页的主机名。
  • Console - Console 对象允许开发人员访问浏览器的控制台。

JavaScript 窗口对象

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

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

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


 window.document.write("Welcome to qikepu com");

或不包含 window 对象 -


 document.write("Welcome to qikepu com");

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

JavaScript Document 对象

document 对象是 JavaScript 窗口对象的一个属性。整个 HTML 文档表示为一个文档对象。文档对象形成 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 Screen 对象

在 JavaScript 中，screen 对象是 window 对象的一个属性。它为我们提供了可用于获取有关设备窗口屏幕信息的属性。我们可以以 window.screen 或只是 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 history 对象可以使用 window.history 或仅使用 history 来访问。我们可以使用 history 对象的方法来导航 history 列表中的 URL。例如，要转到历史列表中的上一页/URL，我们可以使用 history.back（） 方法。

JavaScript 导航器对象

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

JavaScript Location 对象

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

我们可以使用 location 对象的属性和方法来操作 URL 信息。例如，要从当前 URL 获取主机，我们可以使用 window.location.host 或仅使用 location.host。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.qikepu.com

JavaScript 控制台对象

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

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

下一步是什么？

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

打印本页
上一页
下一页