js-BOM

BOM

一、初识BOM

window.alert(“警告框”);//全局方法会省略window

var a=“全局变量”;
function func(){
console.log(“全局函数”)
}

二、BOM的属性值为对象

//1.history历史记录，对history对象的只读引用
console.log(window.history);

//2.location 用于窗口或框架的location对象
console.log(window.location);

//3.navigator浏览器的配置信息，对navigator对象的只读属性
console.log(window.navigator);

//4.screen 屏，对screen对象的只读属性
console.log(window.screen);

//5.document，对document对象的只读属性
console.log(window.document);

//关于缓存
//cookie
console.log(document.cookie);

//html5新增的缓存
//sessionStorage 会话缓存对象
console.log(window.sessionStorage );

//localStorage 本地缓存对象
console.log(window.localStorage )

三、BOM宽高的属性值

1、屏幕的宽高 screen
console.log(‘屏幕的宽’+windw.screen.width+‘屏幕的宽高’+windw.screen.heigth);

2、和window相关的 宽高
1)innerHeight：浏览器窗口的高（文档显示区，滚动条
2)innerWidth：浏览器窗口的宽（文档显示区，滚动条
console.log(‘innerHeight’+windw.innerHeight+‘innerWidth’+windw.innerWidth);

3、
1)outerHeight:浏览器窗口的高（文档显示区，滚动条，工具栏）
2)outerWidth:浏览器窗口的宽（文档显示区，滚动条，工具栏）
console.log(‘outerHeight’+windw.outerHeight+‘outerWidth’+windw.outerWidth);

4、兼容IE8以下浏览器
1）clientWidth 浏览器窗口（文档可见显示区）
2）clientHeight浏览器窗口（文档可见显示区）
console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);

1）clientWidth 浏览器窗口（文档显示区）
2）clientHeight浏览器窗口（文档显示区）
console.log(document.body.clientHeight,document.body.clientWidth);

5.元素
1)clientLeft clientTop 元素border的宽距离边框的偏移
console.log(document.body.clientLeft,document.body.clientTop);

2）offsetWidth 宽+padding+border
offsetHeight 高+padding+border
console.log(oMin.offsetWidth,oMin.offsetHeight);

3）offsetLeft offsetTop 相对于祖先元素中最近有有定位属性的元素的偏移
console.log(oMin.offsetLeft,oMin.offsetTop);

4）scrollWidth scrollHeight 内容的元素大小(总宽度，总高度)

console.log(oMin.scrollWidth,oMin.scrollHeight)
console.log(document.documentElement.scrollHeight,document.documentElement.scrollWidth)
5）scrollTop scrollLeft 元素被卷去的内容的高度和宽度
console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);

四、BOM坐标的属性

1、screenX screenY 返回相对于屏幕窗口的坐标/偏移
console.log(window.screenX,window.screenY);

2、screenLeft screenTop 返回相对于屏幕窗口的坐标/偏移
console.log(window.screenLeft,window.screenTop);

3、pageXOffset pageYOffset 网页内容相对于window偏移的位置
console.log(window.pageXOffset,window.pageYOffset);

4、scrollX scrollY 滚动条卷去部分内容的大小
console.log(window.scrollX,window.scrollY);
console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);

五、BOM框架相关的属性

1、length 返回当前窗口中框架的数量
console.log(window.length);

2、self 返回对当前窗口的引用 相当于window
console.log(window.self);

3、top 返回顶级窗口
console.log(window.top);

4、parent 返回父级窗口
console.log(window.parent);

5、contentWindow 获取框架的元素
console.log(document.getElementById(“a”).contentWindow);

6、frames 返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
console.log(window.frames[2]);

7、name 设置或返回窗口的名称
window.name=“当前窗口”;
console.log(window.name);

console.log(document.getElementById("a").contentWindow.name);

六、BOM的方法之弹窗

1、alert(“内容”) 警告框 显示带有一段消息和一个确认按钮的警告框
aBtns[0].onclick = function () {
window.alert(“警告框”);
}
2、confirm(“内容”) 确认框 显示带有一段消息和 取消 确认按钮的确认框 返回 布尔值
var sure;
aBtns[1].onclick = function () {
// console.log(window.confirm(“确认退出登录吗？”))
var sure = window.confirm(“确认退出登录吗？”);
if (sure) {
console.log(“确定退出”)
} else {
console.log(“点错了，不退出”)
}
}
3、prompt(“提示文本”,“默认输入的文本”) 显示可提示用户输入的对话框 提示框 返回输入的内容
aBtns[2].onclick = function () {
// console.log(window.prompt(“请输入你的年龄”,18))
var age= window.prompt(“请输入你的年龄”,18);
if(age>=18){
console.log(“你已成年”)
}else{
console.log(“未成年”)
}
}

七、BOM的方法之定时器

1、setInterval(function(){},time,参数,参数) 按照指定的周期(以毫秒计)来调用函数或者计算表达式
var timer;
aBtns[0].οnclick=function(){
// timer=setInterval(function(){
// console.log(“这是每个一秒执行一次的定时器”)
// },1000)
timer=setInterval(func,1000,1,2)
}
function func(x,y){
console.log(x,y)
}

aBtns[2].onclick=function(){
   clearInterval(timer)
}

2、setTimeout(function(){},time) 按照指定的周期(以毫秒计)后来调用函数或者计算表达式 延迟计时器 只执行一次
aBtns[1].οnclick=function(){
setTimeout(function(){
console.log(“这是延迟一秒执行的定时器”)
},1000)
}

八、BOM的方法之窗口的加载

1、open(URL,name/target,strWindowFeatures) 打开一个新的窗口或者查找一个已经命名的窗口 默认在新窗口打开
URL：地址 必填项
name：窗口的名称
target：窗口打开的位置
strWindowFeatures:包含新窗口的特征 大小 位置等

aBtns[0].οnclick=function(){
// newWin=window.open(“http://www.taobao.com”);
// newWin=window.open(“http://www.taobao.com”,“新打开的窗口”);
// newWin=window.open(“http://www.taobao.com”,“iframe_a”);
// newWin=window.open(“http://www.taobao.com”,“_self”);
newWin=window.open(“http://www.taobao.com”,“_blank”,“scrollbars=yes,menubar=yes”);
}
2、close() 关闭浏览器窗口
aBtns[1].οnclick=function(){
// window.close()
newWin.close();
}
3、focus() 把键盘焦点给与某个窗口/blur() 将焦点从窗口移开
aBtns[2].οnclick=function(){
newWin.focus();
}
4、stop() 停止窗口的加载
aBtns[4].οnclick=function(){
window.stop();
}
5、print() 打印窗口的内容
aBtns[5].οnclick=function(){
window.print()
}

九、BOM的方法之窗口的加载

1、resiztTo（width,height）把窗口的宽高调整到指定大小 针对open()打开的窗口 无法设置超过一个tab的窗口大小
aBtns[1].οnclick=function(){
window.resizTo(500,500)
}
2、resiztby（width,height）按照指定的像素调整窗口大小 可为负值针对open()打开的窗口
aBtns[1].οnclick=function(){
window.resizby(50，50)
}

十、BOM的方法之窗口的移动

1、moveTo(width,height)把窗口移动到指定位置，针对open()打开的窗口 无法设置超过一个tab的窗口大小
aBtns[1].οnclick=function(){
window.moveTo(500,500)
}
2、moveby（width,height）按照指定的像素调整窗口位置 可为负值针对open()打开的窗口
aBtns[1].οnclick=function(){
window.moveby(50，50)
}

十一、BOM的方法之窗口的滚动条

1、scrollTo(width,height)把内容滚动到指定的坐标
aBtns[1].οnclick=function(){
window.scrollTo(500,500)
}
2、scrollby(width,height)按照指定的元素进行滚动 可以为负值
aBtns[1].οnclick=function(){
window.scrollby(500,500)
}