织梦可以仿所有网站吗,做网站的结论与心得,二维码转链接,设计师之家官网首页什么是 BOM#xff1f;
BOM#xff08;Browser Object Model#xff09;是浏览器提供的对象和方法的集合#xff0c;允许开发者操作浏览器窗口、页面跳转、URL、浏览器历史记录、用户设备信息等。window 对象是 BOM 的顶层对象#xff0c;所有 BOM API 都直接或间接作为 …什么是 BOM
BOMBrowser 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; // 跳转到新的 URLsessionStorage
存储生命周期: 数据在页面会话期间可用。一旦页面或浏览器窗口被关闭存储的数据就会被清除。作用范围: 仅在当前标签页或窗口中有效。即便是同一页面在不同标签页或窗口中打开它们的 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. 两者的主要区别
特性sessionStoragelocalStorage生命周期当前会话关闭页面或窗口后数据清除永久存储直到显式删除作用范围当前标签页或窗口同源的所有标签页和窗口共享典型用途临时数据存储如表单输入长期存储如用户偏好设置、持久化数据存储容量约 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 pNew 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);
