一：BOM
BOM：Browser Object Model 浏览器对象模型
BOM 提供与浏览器交互的方法和接口；BOM的核心对象是window，它表示浏览器的一个实例
全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以
window.open()：打开新窗口，参数--URL、窗口目标、特性字符串、是否取代当前页面的布尔值
window.close()：可关闭新打开的窗口
JavaScript 语言是单线程语言。
超时调用：在指定的时间过后执行代码；setTimeout(要执行的代码，以毫秒表示的等待时间)
取消：clearTimeout(timeoutId)
间歇调用：每隔指定的时间就执行一次代码；setInterval(代码，时间)
取消：clearInterval(Id)
注：最好不用，可用超时调用代替
系统对话框：alert()、confirm()、prompt(提示文本，默认值)
二：DOM
(一)基本概念
DOM：Document Object Model 文档对象模型
DOM是一套对文档的内容进行抽象和概念化的方法
W3C定义：一个与系统平台和编程语言无关的接口，程序和脚本可用通过这个接口动态地访问和修改文档的内容、结构和样式。
DOM工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容
这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面
JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容
DOM代表着加载到浏览器窗口的当前网页
(二)DOM节点介绍
DOM把文档表示为一颗节点数：
节点类型及对应nodeType的值：
| 节点类型 | nodeType |
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
document.getElementById("id")
document.getElementsByTagName("tag")
document.getElementsByClassName("class")
querySelectorAll(CSS选择器)：返回所有匹配的元素
增加元素节点：
document.creatElement("nodeName")
parentElement.appendChild(childNode) 将子节点插入父节点末尾
parentElement.insertBefore(newElement,targetElement) 将一个新元素插入到一个现有元素的前面
parentElement = targetElement.parentNode
删除元素节点：
parent.removeChild(node) 返回要移除的节点
替换元素节点：
parent.replaceChild(要插入的节点，要替换的节点)
注意事项：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效
2，文本节点
获取文本节点的值的两种方式：
方式一：
node.firstChild.nodeValue
方式二：
node.innerHTML
向一个元素增加文本节点：
document.creatTextNode("text")
parent.appendChild(childNode)
3，属性节点
获得属性节点的值：object.getAttribute("attribute")
设置属性节点的值：object.setAttribute("attribute","value")
移除属性节点：element.removeAttribute()
属性节点的parentNode为null，即不被认为是DOM文档树的一部分
(三)节点属性与方法介绍
nodeValue 属性：
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeName属性：
nodeName 属性规定节点的名称，总是返回一个大写字母的值
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
node.hasChildNodes() 有子节点时返回true
element.hasAttribute() 有指定的属性则返回true
element.hasAttributes() 元素拥有属性返回true
element.childNodes ：包含元素子节点、文本节点、注释或处理指令；不含属性节点
注：IE 不会计算空白符；其他浏览器会把空白符当文本节点
node.firsrtChild -->node.childNodes[0] 第一个子节点
node.lastChild 最后一个子节点
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Rock and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="#">here</a>.</p>
</body>
</html>
CSS-DOM：
element.style.property 获取样式只能返回行内样式
element.style.property = value 设置样式
(四)DOM事件
事件流：描述的是从页面中接收事件的顺序
①事件冒泡：事件首先在目标元素上发生，然后沿DOM树向上传播，直到document
②事件捕获：document对象首先接收到事件，然后沿DOM树向下传播，直到事件的实际目标
③DOM事件流：含3个阶段 事件捕获阶段、处于目标阶段和事件冒泡阶段
事件处理程序：响应某个事件的函数，名字以"on"开头
1，HTML事件处理程序：其作为元素的属性 如onclick = "js code"
2，DOM 0级事件处理程序：element.onclick = function(){}
3，DOM 2级事件处理程序：element.addEventListener("事件名"，函数/函数名，布尔值)
element.removeEventListener("事件名"，函数名，布尔值)
布尔值：true --> 在捕获阶段调用事件处理程序
false --> 在冒泡阶段调用事件处理程序
事件对象 ：event对象
currentTarget--> 当前处理的那个元素 （等同于this）target--> 事件的目标
type--> 事件类型
preventDefault() --> 取消事件的默认行为
stopPropagaction --> 取消事件的进一步捕获或冒泡
事件是将JavaScript与网页联系在一起的主要方式
| UI事件 | 焦点事件 | ||
| load | 页面加载时触发；window.onload | blur | 元素失去焦点时触发，不冒泡 |
| unload | 页面卸载后触发 | focus | 元素获得焦点时触发，不冒泡 |
| resize | 当窗口大小变化时触发 | focusin | 获得焦点 |
| scroll | 页面滚动时触发 | focusout | 失去焦点 |
| 鼠标事件 |
键盘事件 |
||
| click |
单击鼠标按钮或按下回车键时触发 |
keypress |
用户按下键盘上的字符键时触发 |
| dbclick |
双击鼠标 |
keydown |
按下任意键时触发 |
| mousedown |
按下任意鼠标按钮触发 |
keyup |
释放按键时触发 |
| mouseup |
释放鼠标按钮 |
||
| mousewheel |
滚动鼠标滚轮时触发 |
||
| mouseover |
鼠标指针移动到元素上方时触发 |
||
| mouseout |
鼠标指针离开元素上方时触发 |
(五)表单对象
属性：
| disable | 是否被禁用 | tabIndex | |
| form | 指向所属表单 | type | input类型 |
| name | value | 提交给服务器的值 | |
| readOnly | autofocus | 自动获得焦点 |
共有方法：
focus()：取得焦点
blur()：失去焦点