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. 两者的主要区别

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);