JavaScript BOM：赋予你的网页生命与活力

javascript BOM 简介

JavaScript BOM (Browser Object Model) 是 JavaScript 的一个重要组成部分，它提供了与浏览器交互的 api，使得网页能够与用户进行交互，并能够访问和操作浏览器窗口、历史记录、位置和其他浏览器功能。BOM 对象包含了几个重要的属性和方法，其中包括：

• window：表示浏览器窗口，它包含了许多子属性和方法，如 document、location、history 等。
• document：表示当前网页的文档对象，它包含了网页的内容和结构，如 body、head、title 等。
• location：表示当前网页的 URL，它包含了许多子属性和方法，如 href、protocol、host 等。
• history：表示当前网页的历史记录，它包含了许多子属性和方法，如 back()、forward()、Go() 等。

JavaScript BOM 常用属性和方法

window 对象

• window.open()：打开一个新的浏览器窗口或选项卡。
• window.close()：关闭当前浏览器窗口或选项卡。
• window.alert()：显示一个带有确定按钮的消息框。
• window.confirm()：显示一个带有确定和取消按钮的消息框，并返回用户选择的按钮。
• window.prompt()：显示一个带有输入框和确定和取消按钮的消息框，并返回用户输入的值。

document 对象

• document.write()：向当前网页的文档流中写入 html 代码。
• document.getElementById()：根据 ID 获取当前网页中的元素。
• document.getElementsByClassName()：根据类名获取当前网页中的元素。
• document.querySelector()：根据 CSS 选择器获取当前网页中的元素。
• document.querySelectorAll()：根据 CSS 选择器获取当前网页中的所有元素。

location 对象

• location.href：获取或设置当前网页的 URL。
• location.protocol：获取当前网页的协议（如 Http 或 https）。
• location.host：获取当前网页的主机名和端口号。
• location.pathname：获取当前网页的路径。
• location.search：获取当前网页的查询字符串。

history 对象

• history.back()：后退到上一个网页。
• history.forward()：前进到下一个网页。
• history.go()：跳转到指定的历史记录中的网页。
• history.length：获取历史记录中的网页数量。

JavaScript BOM 使用示例

下面是一个使用 JavaScript BOM 打开一个新窗口的示例：

function openWindow() {
  window.open("https://www.example.com", "_blank");
}

下面是一个使用 JavaScript BOM 弹出一个消息框的示例：

function showAlert() {
  window.alert("Hello, world!");
}

下面是一个使用 JavaScript BOM 获取当前网页的 URL 的示例：

function getLocation() {
  console.log(window.location.href);
}

总结

JavaScript BOM 是 JavaScript 的一个重要组成部分，它提供了与浏览器交互的 API，使得网页能够与用户进行交互，并能够访问和操作浏览器窗口、历史记录、位置和其他浏览器功能。BOM 对象包含了许多重要的属性和方法，这些属性和方法可以帮助我们开发出更加交互式和动态的网页。