JS事件和BOM
事件的作用：（1）验证用户输入的数据
（2）增加页面的动感效果
（3）增强用户的体验度
事件中的名词：（1）事件源：谁触发的事件
（2）事件名：触发了什么事件
（3）事件监听：谁管这个事件，谁监视？
（4）事件处理：发生了怎么办
事件类型：Keyboard键盘事件；
Mouse事件，由鼠标或者类似用户动作触发的事件；
Media事件，由媒介（比如视频、图像和音频）触发的事件；
常用的事件：（1）onload 当页面或者图像加载完后立即触发
（2）onblur 当元素失去焦点
（3）onfocus 元素获得焦点
（4）onclick 鼠标点击某个对象
（5）onchange 用户改变域的内容
（6）onmouseover 鼠标移动到某个元素上
（7）onmouseout 鼠标从某个元素上离开
（8）onkeyup 某个键盘的键被松开
（9）onkeydown 某个键盘的键被按下
事件流和事件模型
当产生一个事件时，该事件会在元素节点与根节点之间按照特定的顺序传播，路径所进过的节点都会受到该事件，这个传播过程称为DOM事件流；
事件顺序：事件捕获 事件冒泡
DOM事件流：DMO0级事件处理程序——同一个元素的同一个事件设定一个处理程序；
DOM2级事件处理程序——定义了两个方法，用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener(),所有的DOM节点都包含这两种方法，并且他们都接受3个参数：处理的事件名、处理程序的函数、一个布尔值。
BOM（浏览器对象模型）
Window对象是BOM的核心对象，它表示浏览器的一个实例。
Window对象方法
[if !supportLists]1） [endif]系统对话框（1）消息框 alert()
（2）输入框 prompt()
（3）确认框confirm()
2)打开窗口 window.open()
3）关闭窗口 window.close()
4）时间函数 setTimeout()在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以cliearTimeout(id) 来清除指定函数的执行.
setInterval() :可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
Window对象属性
Histroy对象：history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。
history 对象的属性：length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL):
URL 参数使用的是要访问的 URL。而 number 参数使用的是要访
问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。
Location对象
location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
Doucument对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。
document 对象的 body 属性，提供对
元素的直接访问，cookie 属性，用来设置或返回与当前文档有关的所有 cookie，write()方法，向文档写 HTML 表达式或 JavaScript 代码。还有其他属性和方法。DOM——document object model 文档对象模型
dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描
绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。
节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。
文档节点 文档本身 整个文档 document
元素节点 所有的 HTML 元素 、
属性节点 HTML元素内的属性 id、href、name、class
文本节点 元素内的文本 hello
注释节点 HTML中的注释
获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的点）。
注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload =
function () { //预加载 html 后执行};
获取方法：
getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值。
创建节点：
createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了。
插入节点：
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点
间接查找节点：
childNodes () 返回元素的一个子节点的数组
firstChild() 返回元素的第一个子节点
lastChild() 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
替换节点：
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
克隆节点：
cloneNode() 复制节点
删除节点：
removeChild() 从元素中移除子节点
属性操作
在操作 DOM 对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。
getAttribute() 返回指定元素的属性值
getAttributeNode() 返回指定属性节点
element.id 设置或者返回元素的 id
setAttribute() 设置或者改变指定属性并指定值
setAttributeNode() 设置或者改变指定属性节点
element.style 设置或返回元素的样式属性
element.className 设置或返回元素的 class 属性
element.classList 返回元素的类名