Browser Object Model 浏览器对象模型，适用于描述对象与对象之间层次的关系

核心-window对象

所有全局作用域中的变量、函数、对象都会作为window对象的属性和方法。

var age = 18;
function sayAge (){
    console.log(this.age);
}
console.log(window.age);// 18
sayAge();               // 18
window.sayAge();        // 18

定义全局变量和在window对象上直接定义属性的区别：

全局变量不能通过delete操作符删除，直接在window对象上定义的属性可以。

var age = 18;
window.name = 'haha';
delete window.age;          // 浏览器返回false
delete window.name;         // 浏览器返回true

console.log(window.age);    // 18
console.log(window.color);  // undefined（已被删除）

未声明变量会抛出错误，通过查询window对象，可以知道某个可能未声明的变量是否存在

var age = oldAge;           // "oldAge is not defined"
var age = window.oldAge;    // undefined

window对象属性

窗口大小

window.innerWidth、window.innerHeight

浏览器窗口的视口（viewport）大小（以像素为单位）；如果有水平滚动条，也包括滚动条大小。

页面放大时（从100%到200%），这两个属性会缩小。

对浏览器放大缩小时，这两个属性会放大缩小。

outerWidth、outerHeight

获取浏览器窗口外部的大小。

firefox

滚动

scrollX、scrollY

滚动条横/纵向偏移。

这两个值随着滚动位置变化而变化。

scrollTo(x,y)、scroll(x,y)

改变滚动条位置到指定坐标。x，y分别是水平偏移和垂直偏移。

scrollBy()

相对当前位置移动滚动条，而不是移动到绝对位置。

window.frames

window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。

获取每个框架的DOM树，需要使用window.frames[0].document

window.navigator

指向一个包含浏览器相关信息的对象

window.screen

显示设备的信息

注意：指设备而非浏览器的屏幕

URL的编码/解码方法

URL之所以要进行编码，是因为Url中有些字符会引起歧义

JavaScript提供四个URL的编码/解码方法：

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

encodeURIComponent比encodeURI编码的范围更大

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F

系统对话框

alert()

alert() 方法用于显示带有一条指定消息和一个确认按钮的警告对话框，点击确认按钮关闭对话框

confirm()

确认对话有确定和取消两个按钮供用户选择，点击按钮后会返回布尔值，确定返回true，取消返回false。

prompt()

提示对话框，用于提示用户输入一些文本。确认按钮返回输入的内容，取消按钮返回null。

获取CSS值

Window.getComputedStyle()

Window.getComputedStyle(element, [pseudoElt])

element: 用于获取计算样式的Element
pseudoElt: 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）

实例

var btn =document.querySelector('.btn')
btn.addEventListener('click',function(){
  var box =document.querySelector('.box')
  var color = window.getComputedStyle(box,null).getPropertyValue('background-color')
  document.querySelector('p').textContent = color
})

demo

获取图片真实的宽高

通过img对象搭配onload(在图片加载完成后触发)获取原图片真实的高宽，而不是css设定的宽度

实例

如何获取元素的真实宽高？

使用offsetHeight、offsetWidth方法
使用window.getComputedStyle().width/height，这个方法不包含border的宽度

实例

BOM