理解BOM以及整理BOM常用属性和方法

BOM是浏览器对象模型（Browser Object Model），js认为整个浏览器可以当成一个对象window，BOM中定义了很多对象、属性和方法用于操作浏览器。

我们知道DOM是文档对象模型用于表示和操作浏览器的HTML文档部分，所以js进一步认为DOM属于浏览器对象的一部分。除此之外，window上还包括location用于获取页面url地址的位置对象、history浏览器历史记录对象、screen屏幕对象、navigator等

window 对象是BOM中所有对象的核心，是BOM中所有对象的父对象，其自身还包含一些控制窗口的函数，那我就先来看看window

window对象

window代表整个浏览器，代表全局。所以在全局声明的函数、变量都是属于window，包括变量未声明就赋值也该变量也属于window。

  1. 查看浏览器窗口尺寸（或者叫可视区域，不包括工具栏和滚动条）
//IE9以上、Chrome、Firefox、Opera 以及 Safari：
window.innerWidth;
window.innerHeight;
//IE5,6,7,8
window.documentElement.clientHeight ;
window.documentElement.clientWidth;
//IE5,6,7,8兼容性紊乱上面方法不一定行，不行可用下面这种方式
window.body.clientWidth
window.body.clientHeight

封装一个兼容所有浏览器的方法，用于获取浏览器可视宽高：

window.getInnerWH = function () {
    return {
        width: window.innerWidth || window.documentElement.clientWidth || window.body.clientWidth,
        height: window.innerHeight || window.documentElement.clientHeight || window.body.clientHeight
    }
}
  1. 查看完整窗口大小
window.outerWidth
window.outerHeight
  1. 查看元素的尺寸
var odiv = document.getElementsByTagName('div')[0]
odiv.offsetWidth
odiv.offsetHeight

offsetHeight = height + padding + border
offsetWidth = width + padding + border

  1. 查看元素的位置

odiv.offsetLeft 距离左边距离
odiv.offsetTop 距离右边距离
有定位元素，返回的是相对于最近有定位的父级元素的位置;无定位元素，返回的是相对于文档的位置

  1. 查看元素最近有定位的父级
    odiv.offsetParent
    返回最近有定位的父级，若无，则返回body；body的offsetParent返回null；
  2. 查看元素的几何尺寸
    odiv.getBoundingClientRect()
    该方法返回一个对象，对象里面有left、right、top、bottom和width、height。
    兼容性很好，但返回的结果并不是实时的。
  3. 打开一个窗口
window.open(URL,name,specs,replace)

URL：表示要打开的页面地址。如果没有指定URL，打开空白窗口
name：指定target属性或窗口的名称

  • _blank - URL加载到一个新的窗口。这是默认
  • _parent - URL加载到父框架
  • _self - URL替换当前页面
  • _top - URL替换任何可加载的框架集
  • name - 窗口名称

specs：设置窗口规格，可选。一个逗号分隔的项目列表

  • height=pixels 窗口的高度。最小值为100
  • left=pixels 该窗口的左侧位置
  • location=yes|no|1|0 是否显示地址字段.默认值是yes
  • menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
  • resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
  • scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
  • status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
  • titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
  • toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
  • top=pixels 窗口顶部的位置.仅限IE浏览器
  • width=pixels 窗口的宽度.最小.值为100
  • channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
  • directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
  • fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器

replace：可选，用于替换浏览历史中的当前条目
Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

  1. 关闭浏览器窗口
    window.close()

  2. 移动当前窗口位置

window.moveTo(x,y)
将窗口的左上角移动到指定坐标
window.moveBy(x的增量，y的增量)
用于增加
open()、close()、moveTo()的兼容性都很好

  1. 调整当前窗口的尺寸

window.resizeTo(width,height)
用于把窗口大小调整为指定的宽度和高度
window.resizeBy(宽的增量，高的增量)
用于增加宽高
但这两个方法在新版的浏览器中废除了

  1. 浏览器窗口在屏幕的位置

距离左边：window.screenX 或者 window.screenLeft
距离上边：window.screenY或者window.screenTop

  1. 让滚动条滚动

scroll(x,y)
scrollTo(x,y)
scrollBy(x,y)
x,y分别表示滚动条往x轴滚动距离和滚动条往下滚动的距离
前面个两个方法基本一样，而scrollBy()会在之前的数据基础上做累加。可以利用scrollBy实现快速阅读的功能。

  1. 查看滚动条滚动距离

window.pageXoffset
window.pageYoffset
但是低版本IE不兼容，那它用下面两组方法
document.documentElement.scrollLeft
document.documentElement.scrollTop
或者
document.body.scrollLeft
document.body.scrollTop
因为兼容性比较紊乱，采取的方法是两种方法相加，因为不可能两个同时有值
因此我们可以封装一个兼容所有浏览器的方法，用于查看滚动条滚动距离：

window.getScrollLT = function () {
  return {
    left: window.pageXOffset || document.documentElement.scrollLeft + document.body.scrollLeft,
    top: window.pageYOffset || document.documentElement.scrollTop + document.body.scrollTo
  }
}
  1. 弹窗

js中有三种弹窗：警告框、确认框、提示框
window.alert("sometext")
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
window.confirm("sometext")
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作;当你点击 "确认", 返回 true， 如果点击 "取消", 返回 false。
window.prompt("sometext","defaultvalue")
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

  1. 定时器方法也是定义在window上

window.clearInterval()
window.setTimeout()
window.clearInterval()
window.clearTimeout()
具体的使用可以看js定时器那块，讲得非常清楚。

location位置对象

用于获取页面的url地址
location.href 返回当前页面整个URL
location.protocol 返回web协议（http://或者https://）
location.hostname 返回web主机的域名
location.port 返回端口号
location.pathname 返回路径和文件名。
location.hash 返回一个URL的锚部分
assign() 载入一个新的文档
reload() 重新载入当前文档
replace() 用新的文档替换当前文档

history浏览器历史记录对象

history.back();
history.forword();
分别对应加载历史列表中的后一个和前一个URL
history.go() 加载 history 列表中的某个具体页面
history.length 历史记录条目数

screen屏幕对象

可用的屏幕宽度和高度
1.完整的分辨率：
screen.width
screen.height
2.去掉任务栏的可用宽和高（减去界面特性，如任务栏）
screen.availWith
screen.availHeight

navigator 对象

navigator 对象包含有关浏览器的信息
navigator.appCodeName 返回浏览器的代码名
navigator.appName 返回浏览器的名称
navigator.appVersion 返回浏览器的平台和版本信息
navigator.cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
navigator.platform 返回运行浏览器的操作系统平台
navigator.userAgent 返回由客户机发送服务器的user-agent 头部的值



navigator.javaEnabled() 指定是否在浏览器中启用Java
navigator.taintEnabled() 规定浏览器是否启用数据污点(data tainting

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,776评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,527评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,361评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,430评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,511评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,544评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,561评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,315评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,763评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,070评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,235评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,911评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,554评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,173评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,424评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,106评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,103评论 2赞 352