bom是浏览器提供的api,也就是运行环境的工具
可以理解为因为有html页面所有有dom,因为运行在浏览器上所以有bom
那浏览器提供了什么呢?
- window对象
- location对象
- history对象
- navigtor对象
- 弹窗对象
- 计时器
- cookie
- Storage对象
- XMLHttpRequest构造函数
- 最新还有个缓存的api还没普及
下面复制上常用代码,来自大佬的博客
window对象
最高级的对象,下面所有的内容都是window的一部分
//关闭窗口
window.close();
//关闭窗口(a标签就是的href就是调用这个方法的)
window.open("xxx.com","_blank")
//可以使状态栏的文本暂时改变
window.status
//默认的状态栏信息,可在用户离开当前页面前一直改变文本
window.defaultStatus
弹窗对象
window可以不写
//弹出一个具有OK按钮的系统消息框,显示指定的文本
window.alert("message");
//弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值
window.confirm("Are you sure?");
//提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回
window.prompt("What's your name?", "Default");
计时器对象
window可以不写
//设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数
window.setTimeout("alert('xxx')", 1000);
//取消还未执行的暂停,将暂停ID传递给它
window.clearTimeout("ID");
//无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样
window.setInterval(function(){}, 1000);
//取消时间间隔,将间隔ID传递给它
window.clearInterval("ID");
history对象
当前标签的浏览历史,window可以不写
//访问浏览器窗口的历史,负数为后退,正数为前进
window.history.go(-1);
//同上
window.history.back();
//同上
window.history.forward();
//可以查看历史中的页面数
window.history.length
// 修改历史记录
window.history.pushState
// 修改历史记录替换当前的url
window.history.replaceState
document对象
是唯一一个既属于BOM又属于DOM的对象,window可以不写
//获取最后一次修改页面的日期的字符串表示
window.document.lastModified
//用于跟踪用户从哪里链接过来的
window.document.referrer
//获取当前页面的标题,可读写
window.document.title
//获取当前页面的URL,可读写
window.document.URL
//访问页面中所有的锚
window.document.anchors[0] 或 document.anchors["anchName"]
//访问页面中所有的表单
window.document.forms[0] 或 document.forms["formName"]
// 访问页面中所有的图像
window.document.images[0] 或 document.images["imgName"]
//访问页面中所有的链接
window.document.links [0] 或 document.links["linkName"]
//访问页面中所有的Applet
window.document.applets [0] 或 document.applets["appletName"]
//访问页面中所有的嵌入式对象
window.document.embeds [0] 或 document.embeds["embedName"]
//将字符串插入到调用它们的位置
window.document.write() 或 document.writeln();
location对象
载入窗口的URL,window可以不写
//当前载入页面的完整URL
window.location.href
//URL中使用的协议,即双斜杠之前的部分,如http
window.location.portocol
//服务器的名字,如www.wrox.com
window.location.host
//通常等于host,有时会省略前面的www
window.location.hostname
//URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080
window.location.port
//URL中主机名后的部分,如/pictures/index.htm
window.location.pathname
//执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx
window.location.search
//如果URL包含#,返回该符号之后的内容,如#anchor1
window.location.hash
//同location.href,新地址都会被加到浏览器的历史栈中
window.location.assign("http:www.baidu.com");
//同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问
window.location.replace("http:www.baidu.com");
//重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false
window.location.reload(true | false);
cookie对象
短时间储存
F12的第9个按钮Application
这个窗口里除了前面说过的查看相关的所有文件外,cookie也在这里看,cookie是name-value的形式存在的,cookie没有同源策略,同个ip地址的cookie能通用,所以cookie常被用来作为父子iframe之间的通信
//cookie的操作
设置cookie: document.cookie = 'key=value';
获取cookie: document.cookie;
删除cookie: document.cookie = "key=value;max-age=0";
设置max-age存储期限: document.cookie = "key=value;max-age=1000"; // 1000秒
Storage对象
localStorage(本地存储)生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage(会话存储)生命周期为当前窗口或标签页,一旦窗口或标签页被关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
window.localStorage
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
window.localStorage.removeItem("key");
// 上面的localStorage改成sessionStorage一样
navigator对象
在检测浏览器及操作系统上非常有用,window可以不写
//官方浏览器名的字符串表示
window.navigator.appName
//浏览器版本信息的字符串表示
window.navigator.appVersion
//如果启用cookie返回true,否则返回false
window.navigator.cookieEnabled
//如果启用java返回true,否则返回false
window.navigator.javaEnabled
//浏览器所在计算机平台的字符串表示
window.navigator.platform
//安装在浏览器中的插件数组
window.navigator.plugins
//如果启用了数据污点返回true,否则返回false
window.navigator.taintEnabled
//用户代理头的字符串表示
window.navigator.userAgent
screen对象
用于获取某些关于用户屏幕的信息,window可以不写
//屏幕的宽度与高度,以像素计
window.screen.width/window.height
//窗口可以使用的屏幕的宽度和高度,以像素计
window.screen.availWidth/screen.availHeight
//用户表示颜色的位数,大多数系统采用32位
window.screen.colorDepth
//滚动条
window.moveTo(0, 0);
//填充用户的屏幕
window.resizeTo(screen.availWidth, screen.availHeight);
XMLHttpRequest构造函数
是一个非常重要的数据请求的api,window可以不写
这个api改变了前端的生存环境,下一篇单独讲他的使用
window.XMLHttpRequest