这篇文章我们将会简单的介绍 BOM 和 DOM 常用的属性与方法，权且当作是一篇速查手册吧
一、浏览器对象模型
浏览器对象模型（Browser Object Model，BOM）使 JavaScript 可以与浏览器进行交互
1、Window
window 对象表示浏览器窗口，全局变量是 window 对象的属性，全局函数是 window 对象的方法
（1）属性
- name：窗口的名称
- closed：窗口是否已被关闭
- self：对当前窗口的引用
- parent：对父窗口的引用
- opener：对创建当前窗口的窗口的引用
- document：对 Document 对象的只读引用
- screen：对 Screen 对象的只读引用
- location：对 Location 对象的只读引用
- history：对 History 对象的只读引用
- navigator：对 Navigator 对象的只读引用
- innerHeight：浏览器窗口的内部高度（文档显示区的高度）
- innerWidth：浏览器窗口的内部宽度（文档显示区的宽度）
- outerheight：浏览器窗口的外部高度
- outerwidth：浏览器窗口的外部宽度
（2）方法
- open()：打开新窗口
- close()：关闭当前窗口
- moveTo()：把窗口的左上角移动到指定的坐标
- moveBy()：按照指定的像素移动窗口的位置
- resizeTo()：把窗口的大小调整到指定的宽度和高度
- resizeBy()：按照指定的像素调整窗口的大小
- scrollTo()：把内容滚动到指定的坐标
- scrollBy()：按照指定的像素滚动内容
- alert()：创建警告框，用于确保用户可以得到某些信息
- confirm()：创建确认框，用于确保用户可以得到或验证某些信息
- prompt()：创建提示框，用于提示用户在进入页面前输入某个值
- setInterval()：按照指定的周期来调用函数或计算表达式
- clearInterval()：取消由 setInterval() 设置的 interval
- setTimeout()：按照指定的时间来调用函数或计算表达式
- clearTimeout()：取消由 setTimeout() 方法设置的 timeout
- focus()：把键盘焦点给予一个窗口
- blur()：把键盘焦点从顶层窗口移开
2、Window Screen
window.screen 对象（可以简写为 screen 对象）包含屏幕的信息
（1）属性
-
width：显示器屏幕的宽度
-
height：显示器屏幕的高度
-
availWidth：显示器屏幕的可用宽度
-
availHeight：显示器屏幕的可用高度
-
colorDepth：调色板的比特深度
-
pixelDepth：屏幕的颜色分辨率
-
updateInterval：屏幕的刷新率
-
deviceXDPI：显示屏幕的每英寸水平点数
-
deviceYDPI：显示屏幕的每英寸垂直点数
-
logicalXDPI：显示屏幕每英寸的水平方向的常规点数
-
logicalYDPI：显示屏幕每英寸的垂直方向的常规点数
3、Window Location
window.location 对象（可以简写为 location 对象）包含 URL 的信息
（1）属性
- href：当前页面的 URL
- protocol：当前 URL 的协议
- host：当前 URL 的主机名 和 端口号
- hostname：当前 URL 的主机名
- port：当前 URL 的端口号
- pathname：当前 URL 的路径
- search：从问号（?）开始的 URL（查询部分）
- hash：从井号（#）开始的 URL（锚点部分）
（2）方法
- reload()：重新加载当前文档
- assign()：加载一个新的文档
- replace()：用新的文档替换当前文档
4、Window History
window.history 对象（可以简写为 history 对象）包含浏览器的历史
（1）属性
- length：浏览器历史列表中的 URL 数量
（2）方法
- back()：加载 history 列表中的前一个 URL
- forward()：加载 history 列表中的下一个 URL
- go()：加载 history 列表中指定的 URL
5、Window Navigator
window.navigator 对象（可以简写为 navigator 对象）包含有关访问者浏览器的信息
（1）属性
- appCodeName：浏览器的代码名
- appName：浏览器的名称
- appVersion：浏览器的版本
- appMinorVersion：浏览器的次级版本
- browserLanguage：浏览器的语言
- cpuClass：浏览器的 CPU 等级
- cookieEnabled：浏览器是否启用 cookie
- userAgent：User-Agent Header
- onLine：系统是否处于脱机模式
- platform：运行浏览器的操作系统平台
- systemLanguage：操作系统平台使用的默认语言
- userLanguage：操作系统平台的自然语言设置
二、文档对象模型
文档对象模型（Document Object Model，DOM）使 JavaScript 可以访问和操作 HTML 文档
1、Document
每个载入浏览器的 HTML 文档都会成为 Document 对象
注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
（1）属性
- body：当前文档的 <body> 元素
- title：当前文档的标题
- cookie：与当前文档有关的所有 cookie
- domain：当前文档的域名
- URL：当前文档的 URL
- referrer：载入当前文档的文档的 URL
- lastModified：当前文档最后修改的时间
（2）方法
- write()：向文档写 HTML 表达式 或 JavaScript 代码
- writeln()：向文档写 HTML 表达式 或 JavaScript 代码，并在每个表达式后添加一个换行符
- getElementById()：返回带有指定 ID 的节点
- getElementsByTagName()：返回带有指定标签名称的节点列表
- getElementsByClassName()：返回带有指定类名的节点列表
2、Element
Element 对象表示 HTML 元素
（1）属性
- nodeName：规定节点名称，只读
| nodeName | 值 |
|---|---|
| 元素节点 | 与标签名相同 |
| 属性节点 | 与属性名相同 |
| 文本节点 | #text |
| 文档节点 | #document |
- nodeValue：规定节点的值
| nodeValue | 值 |
|---|---|
| 元素节点 | undefined 或 null |
| 属性节点 | 属性值 |
| 文本节点 | 文本本身 |
- nodeType：规定节点类型，只读
| nodeType | 值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
- innerHTML：元素的内容
- id：元素的 id 属性
- title：元素的 title 属性
- style：元素的 style 属性
- className：元素的 class 名称
- tagName：元素的 tag 名称
- attributes：元素属性的 NamedNodeMap（元素属性节点的无序集合）
- ownerDocument：元素的根元素（文档对象）
- parentNode：元素的父元素
- firstChild：元素的第一个子元素
- lastChild：元素的最后一个子元素
- nextSibling：元素的后一个相邻兄弟元素
- previousSibling：元素的前一个相邻兄弟元素
- childNodes：元素子节点的 NodeList
- clientHeight：元素的可见高度（padding + height）
- clientWidth：元素的可见宽度（padding + width）
- offsetHeight：元素的高度（padding + height + border）
- offsetWidth：元素的宽度（padding + width + border）
- offsetLeft：元素的水平偏移位置（该元素左外边距到包含元素左内边距之间的距离）
- offsetTop：元素的垂直偏移位置（该元素上外边距到包含元素上内边距之间的距离）
- offsetParent：元素的偏移容器
- tabIndex：元素的 tab 键控制次序
- accessKey：元素的快捷键
（2）方法
- cloneNode()：克隆节点
- appendChild()：添加子节点
- removeChild()：移除子节点
- replaceChild()：替换子节点
- insertBefore()：插入新节点
- hasChildNodes()：元素是否拥有子节点
- normalize()：合并元素中相邻的文本节点，并移除空的文本节点
- hasAttribute()：元素是否拥有指定属性
- hasAttributes()：元素是否拥有属性
- getAttribute()：返回元素的属性值
- setAttribute()：设置元素的属性值
- removeAttribute()：移除元素的属性
- getAttributeNode()：返回指定的属性节点
- setAttributeNode()：设置指定的属性节点
- removeAttributeNode()：移除指定的属性节点，并返回被移除的节点
- isDefaultNamespace()：检查 namespaceURI 是否为默认的
- isEqualNode()：检查两个元素是否相等
- isSameNode()：检查两个元素是否为相同节点
- isSupported()：检查元素是否支持某一特性
- toString()：把元素转换为字符串
3、Attribute
Attribute 对象表示 HTML 元素的属性
（1）属性
- name：属性名称
- value：属性值
- length：NamedNodeMap 中的节点数
- isId：属性是否为 id 类型
- specified：属性是否为 已指定
（2）方法
- item()：NamedNodeMap 中位于指定下标的节点
- getNamedItem()：获取指定的属性节点
- setNamedItem()：设置指定的属性节点
- removeNamedItem()：移除指定的属性节点
4、Event
Event 对象表示事件的状态，通常与函数结合使用
（1）事件句柄
- onclick：鼠标点击
- ondblclick：鼠标双击
- onmousedown：鼠标按键被按下
- onmouseup：鼠标按键被松开
- onmousemove：鼠标被移动
- onmouseout：鼠标从某元素移开
- onmouseover：鼠标移到某元素上
- onkeydown：键盘按键被按下
- onkeyup：键盘的键被松开
- onkeypress：键盘按键被按下或按住
- onload：加载文档或图像
- onunload：退出页面
- onerror：加载文档或图像时发生错误
- onabort：加载图像时被中断
- onfocus：获得焦点
- onblur：失去焦点
- onselect：文本被选定
- onsubmit：提交按钮被点击
- onchange：用户改变域的内容
- onreset：重置按钮被点击
- onresize：窗口或框架被调整尺寸
（2）鼠标 / 键盘属性
- button：当事件被触发时，鼠标的哪个按钮被点击
- clientX：当事件被触发时，鼠标指针相对于浏览器页面的水平坐标
- clientY：当事件被触发时，鼠标指针相对于浏览器页面的垂直坐标
- screenX：当事件被触发时，鼠标指针相对于屏幕的水平坐标
- screenY：当事件被触发时，鼠标指针相对于屏幕的垂直坐标
- ctrlKey：当事件被触发时，“CTRL” 键是否被按下
- altKey：当事件被触发时，“ALT” 键是否被按下
- shiftKey：当事件被触发时，“SHIFT” 键是否被按下
- metaKey：当事件被触发时，“meta” 键是否被按下
（3）标准属性
- bubbles：事件是否为冒泡事件类型
- cancelable：事件是否可取消默认动作
- currentTarget：返回其事件监听器触发此事件的元素
- target：返回触发此事件的元素
- eventPhase：返回事件传播的当前阶段
- timeStamp：返回事件生成的时间
- type：返回事件的名称
（4）标准方法
- initEvent()：初始化属性
- preventDefault()：不再执行默认动作
- stopPropagation()：不再派发事件
【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】