Javascript 简明教程
JavaScript - Browser Object Model
在 JavaScript 中的浏览器对象模型 (BOM) 指的是由浏览器提供的用于与其交互的对象。通过使用这些对象，你可以操控浏览器的功能。例如，你可以获取浏览器历史记录和窗口大小、导航到不同的 URL 等等。
浏览器对象模型尚未标准化。它取决于所使用的浏览器。
在这里，我们列出了浏览器对象模型的所有对象及其描述 -
-
Window - “window”对象表示当前的浏览器窗口。你可以使用它来操控浏览器窗口。
-
Document - “document”对象表示浏览器窗口中当前打开的网页。你可以使用它来自定义文档的属性。
-
Screen - 它提供有关用户设备屏幕的信息。
-
History - 它提供浏览器会话历史记录。
-
Navigator - 它用于获取浏览器的信息，比如默认语言等。
-
Location - location 对象用于获取 URL 信息，比如当前网页的主机名。
-
Console - console 对象允许开发人员访问浏览器的控制台。
JavaScript Window Object
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 Object
document object 是 JavaScript window 对象的一个属性。整个 HTML 文档被表示为一个 document 对象。Document 对象形成了 HTML DOM。它是 HTML 文档的根节点。
document 对象可以用作 window.document 或仅为 document。
Document 对象为我们提供了许多属性和方法，用于访问 HTML 元素并对其进行操作。其中一个方法为 document.getElementById()，用于使用其 id 访问 HTML 元素。
我们可以用 getElementById() 方法访问具有 id 为“text”的元素，并对其进行操作 -
Example
<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 Object
在 JavaScript 中， screen 对象是 window 对象的一个属性。它为我们提供了可用于获取有关设备窗口屏幕的信息的属性。我们可以将 screen 对象访问为 window.screen 或仅为 screen。
要以像素为单位获取设备屏幕的宽度和高度，我们可以使用 screen.width 和 screen.height 属性 -
Example
<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 Object
在 JavaScript 中， history 对象也是 window 对象的一个属性。它包含当前会话中访问过的 URL 列表。History 对象提供了一个用于操作浏览器会话历史记录的接口。
可以使用 window.history 或仅为 history 访问 JavaScript history 对象。我们可以使用 history 对象的方法在历史记录列表中导航 URL。例如，要进入历史记录列表中的前一页/URL，我们可以使用 history.back() 方法。
JavaScript Navigator Object
JavaScript navigator 对象也是 window 对象的一个属性。使用“navigator”对象，您可以获取浏览器版本和名称，并检查浏览器中是否启用了 cookie。我们可以使用 window.navigator 访问 navigator 对象。我们也可以在不使用 window 前缀的情况下访问它。
JavaScript Location Object
JavaScript ' location ' 对象包含各种属性和方法，用于获取和操作浏览器的位置信息，即 URL。它也是 JavaScript window 对象的一个属性。
我们可以使用 location 对象的属性和方法来操作 URL 信息。例如，要从当前 URL 中获取主机，我们可以使用 window.location.host 或仅为 location.host。主机是 location 对象的属性。