一.Bom 是什么?
DOM(文档对象模型)和 BOM(浏览器对象模型)(关于浏览器操作的API)是 JavaScript 编程中常用的两种操作对象模型。DOM 操作 HTML 文档,而 BOM 则负责处理浏览器窗口和工具栏等浏览器功能的相关操作
API: 是指可以实现特定功能的属性和方法. 浏览器 :是一种客户端软件,可以解析网页(web)
二.Bom提供了什么对象?
BOM 提供了一种访问浏览器窗口和工具栏以及其他浏览器功能的方式
//关于BOM操作的属性和方法
window
location
history
navigator
screen
document
三.它们分别提供了什么作用?
window 对象代表了当前浏览器窗口或标签页。开发者可以使用 window 对象来访问浏览器导航历史、定时器、警报框等功能。还可以使用窗口对象的方法打开新窗口、关闭当前窗口、调整窗口大小等
location 对象代表了包含当前文档的浏览器窗口的位置。开发者可以使用 location 对象获取当前文档的 URL、修改 URL 以及在新窗口中打开 URL 等
navigator 对象代表了浏览器本身,开发者可以使用 navigator 对象获取浏览器名称、版本、操作系统类型等信息。
screen 对象代表了用户屏幕的属性,如屏幕分辨率、色彩位数等。
history 对象代表了浏览器的历史记录,开发者可以使用 history 对象访问前进或后退的历史
四.了解不同对象的用法!
1.window对象
// window对象
//系统弹窗
window.alert('111')
window.prompt('请输入')
window.confirm('您确定要离开吗')
//定时器
setTimeout(function(){
console.log('test');
},1000)
2.location对象
// 获取网页地址
console.log(location.href);
// http://127.0.0.1:5500/javascript%E5%B9%B4%E5%90%8E/%E7%AC%AC%E4%B8%80%E5%A4%A9/code/03-location%E5%AF%B9%E8%B1%A1.html
var v1 = decodeURIComponent(location.href);
console.log(v1);
// http://127.0.0.1:5500/javascript年后/第一天/code/03-location对象.html
// 编码
var k = encodeURIComponent("你好世界");
console.log(k);//%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
// 获取路径的参数 寻找?后面内容
console.log(location.search);//?page=1&pageSize=100 网页地址跟在问号后面的部分
// 获取路径中的锚点值 带#号后面的数据
console.log(location.hash);//#/login?page=1&pageSize=100
// 获取路径中的端口 (0~65535)
// 端口:设备与外界通信的出口 (0~65535)
console.log(location.port); //5500
// 获取路径中的协议
// 协议:一种网络通信的约定/规则
console.log(location.protocol); //http:
// IP 地址/位置
console.log(location.hostname); //127.0.0.1
// 页面刷新的方法
// location.reload()
3.history对象
// history 对象(浏览器历史记录信息对象)
console.log(history);
// 全局函数 可前进一个历史记录的函数
function goForWard() {
// 前进一个历史记录,必须是点击过某链接有前进的过的动作才有用
history.forward();
}
// 可后退一个历史记录的函数
function goBack() {
// 返回上一级历史
history.back();
}
4.navigator对象
// navigator 对象(客户设备信息对象)
console.log(navigator);
// 获取客户端信息
var userAgent = navigator.userAgent;
console.log(userAgent);
//我们可以对设备进行获取与判断
// 封装函数获取设备信息
function getDevice() {
var userAgent = navigator.userAgent;
// 判断这个字段是否存在,不存在则为-1
if (userAgent.indexOf("iPhone") > -1) {
return "ios";
} else if (userAgent.indexOf("Android") > -1) {
return "android";
} else if (userAgent.indexOf("Windows") > -1) {
return "pc";
} else {
return "未知";
}
}
console.log(getDevice());
5.screen对象
// 设备宽高(设备屏幕信息对象)
console.log(screen);
6.cookie对象!!!
cookie 是一种浏览器缓存数据的一种机制(缓存数据的方式)
要在http协议下才能使用,文档协议打开用不了
作用 :缓存数据、共享数据
弊端:数据体积小,约4kb(20条)
// 使用:
// 设置cookie 缓存数据
document.cookie = "color=red; expires=" + (new Date("2024-2-25"));
// 获取cookie缓存数据
var str = document.cookie;
console.log("缓存的数据:", str);
// 删除cookie缓存数据
document.cookie = "color=; expires=" + (new Date("1970-1-1"));