BOM
2017-09-03 16:02 囍呆 阅读(163) 评论(0) 编辑 收藏 举报
BOM 与 DOM 的区别与联系
全局 window 对象
全局域中定义变量和函数：
var str = "hello";
function fn(){
console.log( "world" )
}
console.log( str === window.str);
console.log( fn === window.fn );
（1） window 对象的属性
属性 描述
screenX 返回浏览器相对于屏幕窗口的x坐标(IE不⽀支持)。
screenY 返回浏览器相对于屏幕窗口的y坐标，即距离浏览器最顶端(IE不支持)。
screenLeft 返回浏览器相对于屏幕窗口的x坐标。
screenTop
返回浏览器相对于屏幕窗口的y坐标(在IE中这个坐标了包括工具栏+菜单栏+地址栏的高
度)。
当浏览器是全屏状态下时执行以下代码：
console.log( window.screenX );
console.log( window.screenY );
console.log( window.screenTop );
console.log( window.screenLeft );
（2）窗口大小
属性 描述
innerWidth 返回窗口的文档显示区的宽度(IE不支持)。
innerHeight 返回窗口的文档显示区的高度(IE不支持)。
document.documentElement.clientWidth 返回窗口的文档显示区的宽度(通用方法)。
document.documentElement.clientHeight 返回窗口的文档显示区的高度(通用方法)。
（3）window 对象的方法
滚动条的控制
方法 描述
scrollBy( x, y ) 相对于当前滚动条的位置移动。
scrollTo( x, y ) 把内容滚动到指定的坐标。
1
// 点击“点击”按钮后相对于当前位置向下移动 500，向右移动 100
btn.onclick = function() {
window.scrollBy( 100, 500 );
}
// 点击“点击”按钮后移动到下 500，右 100 的位置
btn.onclick = function() {
window.scrollTo( 100, 500 );
}
打开新窗口
语法结构：
参数说明：
console.log( window.innerWidth );
console.log( window.innerHeight );
console.log( document.documentElement.clientWidth );
console.log( document.documentElement.clientHeight );
window 对象的⽅方法
1
// 点击“点击”按钮后相对于当前位置向下移动 500，向右移动 100
btn.onclick = function() {
window.scrollBy( 100, 500 );
}
// 点击“点击”按钮后移动到下 500，右 100 的位置
btn.onclick = function() {
window.scrollTo( 100, 500 );
}
语法结构：
window.open( URL, name, features, replace )
（4）时间隔函数(计时器)
方法 描述
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 interval。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
2、History 对象
History 对象包含用户在浏览器中访问过的 URL（网址）。
history 对象的属性
属性 描述
length 返回历史列表中的网址数量。
console.log( history.length )
history 对象的方法
方法 描述
back() 实现转跳到上一个页面，作用和浏览器的回退按钮一样。
forward() 实现跳转下一个页面，作用和浏览器的前进按钮一样。
go() 实现跳转到指定的页面。如果为负数表示后退，如果为正数表示前进。
forward.onclick = function(){
history.forward();
}
back.onclick = function(){
history.back();
}
go.onclick = function(){
history.go(1);
}
3、Location 对象
Location 对象包含了浏览器的地址栏中的信息。该对象主要用于获取和设置地址。
Location 对象的属性
属性 描述
href 获取或设置当前浏览器窗口的地址栏信息。
hostname 获取URL的主机名。
pathname 获取URL路路径名。
port 获取URL服务器使用的端口号。
search 获取URL的查询部分。
// 获取
console.log( location.href );
// 设置
location.href = "https://www.baidu.com";
Location 对象的方法
方法 描述
assign(URL) 载入一个新的文档，作用和直接修改 location 相同。
reload()
重新载入当前文档，作用和刷新按钮一样。参数为 true 时，则会强制清空缓存刷
新页面。
replace(newURL) 用新的文档替换当前文档（不会生成历史记录，不能使用回退按钮回退）。
4、Screen 对象
包含有关客户端显示屏幕的信息。
Screen 对象的属性
属性 描述
availHeight 返回屏幕的高度（不包括任务栏）。
availWidth 返回屏幕的宽度（不包括任务栏）。
width 返回屏幕的总宽度。
height 返回屏幕的总高度。
console.log( screen.availHeight );
console.log( screen.availWidth );
console.log( screen.width );
console.log( screen.height );
5、Navigator 对象
Navigator 对象表示当前浏览器，该对象包含了浏览器的信息。
Navigator 对象的属性
属性 描述
appCodeName 返回浏览器的代码名。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
platform 返回浏览器的操作系统平台。
console.log( navigator.appCodeName ); // Mozilla
console.log( navigator.appName ); // Netscape
console.log( navigator.appVersion );
// 5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
console.log( navigator.platform );
