BOM编程
什么是 BOM？
BOM（Browser Object Model）是浏览器提供的对象和方法的集合，允许开发者操作浏览器窗口、页面跳转、URL、浏览器历史记录、用户设备信息等。window 对象是 BOM 的顶层对象，所有 BOM API 都直接或间接作为 window 对象的属性和方法来使用。
Window：
window 是 BOM 编程中的核心对象，也是与浏览器和网页进行交互的基础
三中弹窗方式：
1. window.alert()信息提示框
- 功能: 显示一个带有消息的警告框，只有“确定”按钮，用户点击后才能继续操作。
- 用法:
alert("This is an alert box!"); - 特性:
- 仅显示消息和一个“确定”按钮。
- 用于提示用户某个信息或警告。
2. window.confirm()信息确认框
- 功能: 显示一个带有消息的确认框，包含“确定”和“取消”按钮。返回一个布尔值，用户点击“确定”返回
true，点击“取消”返回false。 - 用法:
var result = confirm("Are you sure you want to delete this?"); if (result) {// 用户点击了“确定”console.log("User confirmed"); } else {// 用户点击了“取消”console.log("User canceled"); } - 特性:
- 提供给用户确认或取消的选择。
- 常用于需要用户确认某个操作（如删除、提交等）的场景。
3. window.prompt()信息输入框
- 功能: 显示一个带有文本输入框的提示框，允许用户输入信息，并返回用户输入的字符串。如果用户点击“确定”，则返回输入的内容；如果点击“取消”或不输入内容，返回
null。 - 用法:
var userInput = prompt("Please enter your name:", "default name"); if (userInput !== null) {console.log("User input:", userInput); } else {console.log("User canceled the prompt"); } - 特性:
- 允许用户输入内容。
- 可以提供一个默认值（可选）。
- 常用于需要获取用户输入的简单交互场景。
Window对象常见属性：
window.history:
用于访问浏览器的历史记录，可以用来前进或后退。
window.history.back(); // 后退
window.history.forward(); // 前进
window.setTimeout(function, milliseconds)
- 功能: 在指定的毫秒后执行某个函数。
- 用法:
setTimeout(function() {alert("Executed after 2 seconds"); }, 2000);
window.setInterval(function, milliseconds)
- 功能: 每隔指定的毫秒重复执行某个函数。
- 用法:
setInterval(function() {console.log("This runs every 2 seconds");
}, 2000);
window.location:
用于获取和设置当前页面的 URL 信息。
console.log(window.location.href); // 获取当前 URL
window.location.href = "https://www.example.com"; // 跳转到新的 URL
sessionStorage
- 存储生命周期: 数据在页面会话期间可用。一旦页面或浏览器窗口被关闭，存储的数据就会被清除。
- 作用范围: 仅在当前标签页或窗口中有效。即便是同一页面在不同标签页或窗口中打开，它们的
sessionStorage也互相独立。 - 用途: 适用于临时数据存储，例如页面会话中的用户信息或临时表单数据。
- 存储大小: 约 5-10 MB（具体取决于浏览器）。
- 用法示例：
// 存储数据 sessionStorage.setItem('username', 'JohnDoe');// 获取数据 var username = sessionStorage.getItem('username'); console.log(username); // 输出 'JohnDoe'// 删除数据 sessionStorage.removeItem('username');// 清空所有数据 sessionStorage.clear();
localStorage
- 存储生命周期: 数据存储是持久的，即使浏览器关闭或设备重启，数据依然存在，直到被显式删除。
- 作用范围: 在所有同源窗口和标签页中共享，即同一网站的不同标签页或窗口都可以访问相同的
localStorage数据。 - 用途: 适用于需要长期保存的数据，例如用户偏好设置、浏览历史等。
- 存储大小: 约 5-10 MB（具体取决于浏览器）。
- 用法示例：
// 存储数据 localStorage.setItem('theme', 'dark');// 获取数据 var theme = localStorage.getItem('theme'); console.log(theme); // 输出 'dark'// 删除数据 localStorage.removeItem('theme');// 清空所有数据 localStorage.clear();
3. 两者的主要区别
| 特性 | sessionStorage | localStorage |
|---|---|---|
| 生命周期 | 当前会话，关闭页面或窗口后数据清除 | 永久存储，直到显式删除 |
| 作用范围 | 当前标签页或窗口 | 同源的所有标签页和窗口共享 |
| 典型用途 | 临时数据存储（如表单输入） | 长期存储（如用户偏好设置、持久化数据） |
| 存储容量 | 约 5-10 MB（浏览器依赖） | 约 5-10 MB（浏览器依赖） |
document：
1. document.getElementById(id)
- 功能: 返回文档中具有指定
id的元素。 - 用法:
var element = document.getElementById("myElement");
2. document.getElementsByClassName(className)
- 功能: 返回文档中具有指定类名的所有元素的集合。
- 用法:
var elements = document.getElementsByClassName("myClass");
3. document.getElementsByTagName(tagName)
- 功能: 返回文档中具有指定标签名的所有元素的集合。
- 用法:
var elements = document.getElementsByTagName("div");
4. element.innerHTML
- 功能: 获取或设置元素的 HTML 内容（包括 HTML 标签）。
- 用法:
element.innerHTML = "<p>New HTML content</p>";
5. element.addEventListener(event, function)
- 功能: 为指定元素添加事件监听器，当事件触发时执行相应的函数。
- 用法:
element.addEventListener("click", function() {alert("Element clicked!"); });
6. element.removeEventListener(event, function)
- 功能: 移除指定元素的事件监听器。
- 用法:
element.removeEventListener("click", handleClickFunction);
7. element.appendChild(newChild)
- 功能: 将新的子元素追加到指定元素的末尾。
- 用法:
var newElement = document.createElement("div"); element.appendChild(newElement);
8. element.removeChild(child)
- 功能: 移除指定元素的子元素。
- 用法:
element.removeChild(childElement);