BOM概述
BOM浏览器对象模型,主要用于操作浏览器相关的内容(调用浏览器相关的功能及获取浏览器携带的内容),通过共有对象来解决没有规范的问题。
BOM共有对象
![](https://img-blog.csdnimg.cn/img_convert/20f9cf33bd978c9790f4faa565568748.png)
Window
属性
closed 是否关闭(默认值false)
innerHeigh窗口可操作区域的高度
innerWidth窗口可操作区域的宽度
scrollX滚动栏x轴的坐标
scrollY滚动栏y轴的坐标
.....
方法
打印方法
console.log()//日志打印
console.error()//错误打印
console.warn()//警告
console.info()//信息打印
console.debug()//调试打印
弹框方法
alert()//信息框,没有返回值
prompt()//输入框 有返回值 返回输入的内容 String
confirm()//选择框 有返回值 返回布尔类型
打开窗口的方法 open()
//第1个是打开的url路径地址,第2个是打开的方式(a标签的target一致),第3个是打开时的配置(使用=赋值 使用,隔开)
window.open('http://www.baidu.com','_blank','width=100,height=200')
关闭窗口的方法close()
window.close()
改变窗口位置的方法
window.moveTo(30,30)//到达30,30的坐标
window,moveBy(20,20)//到达50,50的坐标 原有的基础增加
改变窗口大小的方法
window.resizeTo(30,30)//大小改为宽30,高30
window.resizeBy(10,10)//大小改为宽40,高40 原本的基础增加
改变滚动栏的位置
window.scrollTo(300,300)//滚动栏x轴到达300,y轴到达300
window.scrollTo(100,100)//滚动栏x轴到达400,y轴到达400 原本的基础增加
打印机功能调用print打印方法
window.print()
Location
概述
是地址栏对象,可以获取地址栏上的所有信息
相关属性
hash哈希获取#后面携带的内容
host主机 IP地址+端口号
console.log(location.host)//127.0.0.1:8080
hostname 主机名 IP地址
console.log(location.hostname)//127.0.0.1
href url路径
port 端口号
pathname 路径名
search 获取?后面的参数
protocol 协议
相关方法
assgin跳转页面(会产生历史页面)
<button id="assgin">assgin</button>
documenet.getElementById("assgin”).onclick = function(){
location.assgin("http://www.baidu.com")
}
replace 替换url跳转页面
reload重新加载页面
练习
将https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg 里面的key value提取组成一个对象
function fn(url){
//对?进行分割
url =url.slipt("?")[1] //ie=UTF-8&wd=mdn&tn=15007414_dg
//对&进行分割
var arr =url.slipt("&")//数组['ie=UTF-8','wd=mdn','tn=15007414_dg']
var obj={}
//遍历数组
for(var str of arr){ //遍历ie=UTF-8 wd=mdn tn=15007414_dg
var arr1=str.split("=")//['ie','UTF-8'] ['wd','mdn'] ['tn','15007414_dg']
obj[arr1[0]]=arr[1] //对象赋值
}
return obj
}
cosole.log(fn(https://www.baidu.com/s?ie=UTF-8&wd=mdn&tn=15007414_dg))
History
概述
history对象是历史对象,记录所有的历史页面,不是历史记录。
属性
length 历史页面个数
state值(默认值为null)
scrollRestoration记录滚动栏的位置
方法
forward
back
go
document.getElementById("forwad").onclick=function(){
history.forward()
}
document.getElementById("back").onclick=function(){
history.back()
}
document.getElementById("go").onclick=function(){
history.go()// 0为区间 0是自己 1是前进 -1为后退
}
Navigator
概述
navigator属于浏览器的导航对象
属性
userAgent 用户信息
appName
appVersion
language
screen屏幕
width宽
height高
availWidth可视区宽度
availHeight可视区高度
document
是文档对象,包含用于操作对应的html文档的相关内容,是整个dom里面最大的对象,属于BOM的