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("欢迎来到教程点");
或者不使用 window
对象:
document.write("欢迎来到教程点");
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 的元素并操控它:
示例
<html>
<body>
<div id="text">这段文字将会改变。</div>
<script>
const textDiv = document.getElementById("text");
textDiv.innerHTML = "这个 DIV 的文本已更改。";
</script>
</body>
</html>
输出:
这个 DIV 的文本已更改。
JavaScript Screen 对象
在 JavaScript 中,screen
对象是 window
对象的一个属性。它提供了一些可以用来获取设备屏幕信息的属性。我们可以将 screen
对象表示为 window.screen
或者简单的 screen
。
为了以像素为单位获取设备屏幕的宽度和高度,我们可以使用 screen.width
和 screen.height
属性:
示例
<html>
<body>
<div id="width">设备屏幕的宽度是</div>
<div id="height">设备屏幕的高度是</div>
<script>
document.getElementById("width").innerHTML += screen.width + " px.";
document.getElementById("height").innerHTML += screen.height + " px.";
</script>
<p>上述结果对于不同的设备可能会有所不同。</p>
</body>
</html>
输出:
设备屏幕的宽度是 1536 px.
设备屏幕的高度是 864 px.
上述结果对于不同的设备可能会有所不同。
JavaScript History 对象
在 JavaScript 中,history
对象也是 window
对象的一个属性。它包含当前会话中访问过的 URL 列表。history
对象提供了一个接口来操控浏览器的会话历史。
JavaScript history
对象可以通过 window.history
或者简单的 history
来访问。我们可以使用 history
对象的方法来导航历史列表中的 URL。例如,要导航到历史列表中的上一个页面/URL,我们可以使用 history.back()
方法。
JavaScript Navigator 对象
JavaScript navigator
对象也是 window
对象的一个属性。使用 navigator
对象,你可以获取浏览器版本和名称,并且检查浏览器是否启用了 Cookie。我们可以使用 window.navigator
来访问 navigator
对象。我们也可以不使用 window
前缀来访问它。
JavaScript Location 对象
JavaScript location
对象包含了各种属性和方法来获取和操控浏览器位置(即 URL)的信息。它也是 JavaScript window
对象的一个属性。
我们可以使用 location
对象的属性和方法来操控 URL 信息。例如,要从当前 URL 获取主机,我们可以使用 window.location.host
或者简单的 location.host
。host
是 location
对象的一个属性。
示例
<html>
<body>
<div id="output"></div>
<script>
document.getElementById("output").innerHTML =
"当前位置的主机是: " + location.host;
</script>
</body>
</html>
输出:
当前位置的主机是: www.tutorialspoint.com
JavaScript Console 对象
JavaScript console
对象允许我们访问浏览器的调试控制台。它是一个 JavaScript window
对象的属性。它可以使用 window.console
或者简单的 console
来访问。
console
对象为我们提供了不同的方法,例如 console.log()
。console.log()
方法用于在调试控制台中显示消息。