objextbox 浏览器_浏览器对象模型BOM（Browser Object Model）

BOM全称Browser Object Model - 浏览器对象模型，他提供了很多对象，用于访问浏览器的功能，没有规范，BOM的核心是window

什么是window，什么是document?

window是js中最大的对象，表示窗口，包含document

document文档对象，表示HTML

1、window对象

1、window

// 所有的全局变量和全局函数，都是window的成员。

​

var a = 5;functionfn() {

console.log('平头哥');

}

​

console.log(a);

console.log(window.a);

​

fn();

window.fn();

​

​//-----------------------//window是一个对象，它下面就有很多的属性和方法//console.log(window); // {}

var n = 0;for (var attr inwindow) {

n++;

console.log(n, attr, window[attr]);

}

系统对话框

//所有 JavaScript 全局对象均自动成为 window 对象的成员。//alert：有确定按钮的弹出窗，返回undefined

var n = window.alert('弹出');

console.log(n);

​//confirm：有确定和取消的弹出窗，确定返回true，取消返回false

var n = window.confirm('来不来？');

console.log(n);

​//prompt：有输入框的弹出窗，确定返回输入框的内容，取消返回null

var n = window.prompt('请填入你的年龄', 800);

console.log(n);

open和close

打开

关闭

//可以通过js的方式，打开一个页面

​//打开//window.open(url, 打开窗口的方式, 设置窗口大小, 新窗口是否取代浏览器记录中的位置)//_self ：在当前窗口打开//_blank:在新窗口打开//返回新页面的window对象

​//关闭//被关闭窗口的window对象.close(); 只能关闭由js打开的窗口

​var btn = document.querySelectorAll('button');var w = null; //新打开窗口的window对象的引用

​//打开

btn[0].onclick = function() {

w= open('https://www.baidu.com/', '_blank', 'width=600px,height=400px', false);//console.log(w);

}

​//关闭

btn[1].onclick = function() {

w.close();

}

2、location对象

//location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

console.log(location);

​//从location里面获取信息//console.log(location.href); // url地址//console.log(location.hash); // #号后面的东西，包括#号//console.log(location.search); // ?号后面的东西，包括?号//console.log(location.host); // 返回服务器名称和端口号//console.log(location.hostname); // 域名//console.log(location.pathname); // 文件地址//console.log(location.port); // 端口号//console.log(location.protocol ); // 协议

​//设置//location.hash = '123'//location.search = 'a=2&c=3'

setTimeout(function() {//跳转页面

location.href = 'https://www.baidu.com/'},3000);

3、history对象

保存着用户上网的历史记录，从窗口被打开的那一刻算起。

history.go(-1); //后退一页

history.go(1); //前进一页

history.go(2); //前进两页

history.back();//后退

history.forward();//前进

4、navigator对象

navigator 对象的属性通常用于检测显示网页的浏览器类型

console.log('浏览器代号', navigator.appCodeName);

console.log('浏览器名称', navigator.appName);

console.log('浏览器版本', navigator.appVersion);

console.log('是否启用了cookie', navigator.cookieEnabled);

console.log('硬件平台', navigator.platform);

console.log('用户代理', navigator.userAgent);

console.log('代理语言', navigator.systemLanguage);

2、位置属性

1、元素宽高

获取元素的宽高(不能获取隐藏元素的宽高)

var box = document.getElementById('box');

console.log(box.clientWidth); //120 width + padding

console.log(box.offsetWidth); //122 width + padding + border

console.log(box.clientHeight); //120 height + padding

console.log(box.offsetHeight); //122 height + padding + border

获取特殊标签

console.log(document.body); //body标签

console.log(document.documentElement); //html标签

document.title = '起飞了'; //获取title标签

获取可视区宽高 (html的宽高)

alert(document.documentElement.clientWidth);

alert(document.documentElement.clientHeight);

元素上边框和左边框(用处不大)

console.log(box.clientTop); //获取元素上边边框的宽度

console.log(box.clientLeft); //获取元素左边边框的宽度

2、元素位置

元素.offsetParent 返回离它最近的有定位属性的父级，如果没有定位的父级，则返回body

元素.offsetTop 返回离它最近的有定位属性的父级的顶边的距离，如果没有定位的父级，则返回body的距离

元素.offsetLeft 返回离它最近的有定位属性的父级的左边的距离，如果没有定位的父级，则返回body的距离