day08 BOM讲解

BOM概述

BOM浏览器对象模型，主要用于操作浏览器相关的内容（调用浏览器相关的功能及获取浏览器携带的内容）,通过共有对象来解决没有规范的问题。

BOM共有对象

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的