JS分为 ECMAScript、DOM文档对象模型、BOM浏览器对象模型三部分
API（Application Program Interface，应用程序接口）
是一些预定义的函数，让开发人员无需访问源码，无需了解内部工作机制的细节，就可以完成一些功能的工具。
Web API 就是指DOM和BOM，是浏览器提供的一套实现浏览器功能和页面元素的API；
它是 JS 的 应用，用JS基础语法实现网页交互效果。
DOM（Document Object Modle）是处理可扩展标记语言（HTML或XML）的标准程序接口。
将页面表示成DOM树，DOM将树上这些内容都看成对象：
文档（document）—— 一个页面就是一个文档；
元素（element）—— 页面中所有标签都是元素；
节点（node）—— 网页中所有内容（标签、属性、文本、注释等）都是节点。
（创建、增、删、改、查、属性操作、事件操作）
要操作元素，实现功能，首先要获取元素，获取方式有以下几种：
（1）通过ID获取
document.getElementById ( 'ID名' )
返回的是一个元素对象（object），用 console.dir 打印元素对象，可以更好地查看里面的属性和方法。
（2）通过标签名获取
document.getElementByTagName ( '标签名' ) 或
父元素.getElementByTagName ( '标签名' )
返回带有指定标签名的对象集合，以伪数组的形式存储；
还可以获取指定的某一个父元素内部所有指定标签名的子元素。
（3）H5新增的获取元素方式（推荐）
通过类名获取，返回指定类名的对象集合：
document.getElementByClassName ( '类名' )
通过选择器获取（），返回指定选择器的第一个元素对象：
document.querySelector ( '标签名' )
返回指定选择器的所有元素对象集合：
document.querySelectorAll ( '标签名' )
（4）获取特殊元素
document.body //获取body元素
document.documentElement //获取html元素
事件的本质：触发——响应机制
事件由三要素组成：
事件源 —— 事件被触发的对象；事件类型 —— 如何触发；事件处理程序（函数赋值） —— 要实现的事件效果
事件执行的步骤：
获取事件源 —— 获取元素然后赋值给变量；注册（绑定）事件 —— 给变量绑定一个鼠标事件等；添加事件处理程序 —— 将要实现的功能效果写在函数里，再赋值给事件。
JS的DOM操作可以改变网页内容、样式和结构，还可以改变元素的内容和属性；
主要就在事件处理程序（函数）中，通过操作元素来实现想要的效果。
（1）改变元素内容
element.innerText = '...' ; 或 element.innerHTML
两者的区别：
innerText 不能识别内容中的标签，赋值时会直接打印标签，读取时会删除标签并且去除空格和换行；
innerHTML（标准推荐）能识别内容中的标签，赋值时会实现标签的效果，读取时会直接打印标签并且保留空格和换行。
（2）改变元素属性
element.属性 = '...' ; 如 img.src = '...' ;
其中还有改变表单属性，如 input.value = '...'；禁用表单元素 element.disabled = true;
（3）改变元素的样式属性
行内样式操作：
element.style.样式属性 = '...' ;
其中的样式属性采用驼峰命名法，如fontSize、backgroundColor等；
此操作产生的是行内样式，CSS权重比较高。
类名样式操作：
若对于一个元素想修改的样式较多，可以在CSS中新增一个类选择器，使其包含所有的样式操作；
然后在事件处理程序中，将新增选择器的类名赋值给该元素：
element.className = ' (原类名) 新增类名 ' ;
操作元素
排他思想：有一组相同的元素，想要发生事件时只有其中一个元素实现某种样式
—— 在for循环中，先清除所有元素的样式，再修改目标元素的样式。
（4）自定义属性的操作
自定义属性是为了保存并使用数据，使有些数据可以保存在页面中而不用保存到数据库中。
获取元素的属性值：
element.属性 —— 获取内置属性的值；
element.getAttribute ('属性') —— 主要获取程序员给元素自定义的属性的值；
修改元素的属性值：
element.属性 = '值' —— 设置内置属性的值；
element.setAttribute ('属性', '值') —— 主要设置自定义属性的值（class有点不同）；
移除属性：
element.removeAttribute ('属性')
进行操作时，不容易判断一个属性是否是自定义属性，所以H5新增规定自定义属性都以 data- 开头来命名；
并新增data- 开头的自定义属性的读写方式： element.dataset.属性 或 element.dataset ['属性']
（element.dataset 中存放了所有data-开头的自定义属性；
其中的属性名不需要加data- 的开头，直接用后面连接的名字；
若属性名后面部分有多个 “-” 连接的单词，则读写时采用驼峰命名法。）
（5）动态创建元素
document.write ('元素标签') —— 直接将内容写入页面的内容流，但文档流执行完后，会导致页面全部重绘；（了解）
node.innerHTML = '元素标签' —— 直接写入，创建多个元素时，用拼接字符串的方式 += ，会比较耗时；用数组存储时，就会效率较高；
document.createElement ('元素标签') —— 创建后还要与appendChild添加进去，创建多个元素时，效率会稍低一点。
获取元素有两种方式：
一是利用DOM提供的方法（函数）获取，但这种方法逻辑性不强且繁琐；
二是利用节点层级关系（父子兄关系）获取，逻辑性强但兼容性稍差。
网页中所有的内容，如标签、属性、文本、注释等都是节点，在DOM中用node表示；
节点的三个基本属性：nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）；
nodeType：元素节点为1、属性节点为2、文本节点（文字、空格、换行等）为3；
（1）父节点
先获取一个元素作为node后，使用：
node.parentNode
返回当前node最近的一个父节点，若无则返回null。
（2）子节点
node.childNodes
返回当前node的所有子节点的集合，包括元素、文本节点等等（不提倡）。
node.children
返回当前node的所有子元素节点，是一个只读属性（常用）。
node.firstChild / lastChild
获取当前node的第一个/最后一个子节点，不管是文本节点还是元素节点。
node.firstElementChild / lastElementChild
获取当前node的第一个/最后一个子元素节点，但只有IE9以上才支持；
所以实际开发中常用 node.children [ 0 ] 、node.children [ node.children.length - 1 ]
（3）兄弟节点
node. previousSibling / nextSibling
返回当前node的上一个/下一个兄弟节点，包括元素、文本节点等等。
node. previousElementSibling / nextElementSibling
返回当前node的上一个/下一个兄弟元素节点，但只有IE9以上才支持；
解决办法：自己封装一个兼容性函数。
（4）创建元素节点
原先页面中不存在的节点，通过 node.createElement ('元素标签') 可以创建一个元素节点；
然后通过 父级node.appendChild (子级元素) 可以将新创建的子元素添加到指定父节点的子节点列表的末尾；
或者通过 父级node.insertBefore (子级元素, 指定子元素) 添加到指定子元素的前面。
（5）删除节点：删除父元素中的某个子节点
父级node.removeChild (子级元素)
（6）复制节点：
node.cloneNode (); 将当前的元素节点复制一份；
再通过 父级node.appendChild (新复制的节点) 添加到父元素中；
注意：如果 node.cloneNode () 括号里是空或者false，则进行的是浅拷贝，即只复制标签，不复制里面的内容；node.cloneNode (true); 为深拷贝，同时复制节点标签和内容。
（1）注册事件（绑定事件）
两种方式：传统方式（上文）和方法监听注册方式
传统注册方式：
< button onclick = "alert( 'hi' )" > </buttin> 或 btn.onclick = function() {...}
具有注册事件的唯一性，即同一个事件的同一个函数只能设置一个处理函数，设置多个时就有层叠性。
方法监听注册方式：
eventTarget.addEventListener ( type, listener[, useCapture] )
是一个方法，将指定监听器（事件处理程序）注册到目标对象上，同一个事件可以添加多个监听器并连续执行；
IE9之前的IE不支持，用attachEvent()代替。
参数：
type —— 事件类型字符串，如 'click'、'mouseover'；
listener —— 事件处理程序，事件发生时就调用此监听函数，function() {...}；
useCapture -—— 可选参数，默认false，表示在事件冒泡阶段调用事件处理程序，true 表示在时间捕获阶段调用。
（2）删除事件（解绑事件）
传统方式：
eventTarget.onclick/.. = null;
监听方式：
要将事件处理程序单独写，然后调用
eventTarget.removeEventListener ('click', fn);
（3）DOM事件流
事件流：是指从页面中接收事件的顺序；
DOM事件流：事件发生时，在元素节点之间按照特定顺序传播的传播过程。
三个阶段：
捕获阶段，从最顶层到目标元素 document、html、body、div 逐级向下传播事件；到达当前目标阶段，目标元素接收事件；冒泡阶段，从目标元素返回顶层，逐级向上传播事件。
如果document或者其他父元素也注册了事件，就会按照捕获或者冒泡阶段的顺序来执行事件处理程序；
JS代码中只能执行捕获或者冒泡其中的一个阶段；
传统onclick等 只能在冒泡阶段；
监听注册方式中，由参数useCapture决定。
（5）事件委托（代理、委派）
原理：如果要多个子节点全都要设置事件监听器，就将事件监听器设置在其父节点上，就可以利用事件冒泡原理影响每个子节点。
（触发子节点，事件向上冒泡，就会触发父节点的事件）
（4）事件对象
它是一系列与事件相关的数据的集合，代表事件的状态，如鼠标点击事件，事件对象就包含了 鼠标坐标 等相关信息；
写在事件处理函数的小括号里，可以看作 形参，function ( event ) {...}；
系统自动存在的，不用创建或者传递参数；
IE9以下不支持，要写成 window.event。
常用属性和方法：
都有兼容性问题
属性方法说明e.target返回触发事件的对象元素e.currentTarget返回注册事件的对象元素，同 thise.type返回事件的类型，如click、mouseover等
e.preventDefault ()阻止默认事件行为，让链接不跳转或者submit按钮不提交e.stopPropagation ()阻止事件冒泡
（6）鼠标事件
（了解）
contextmenu 上下文菜单 —— 主要用于警用鼠标右键菜单，用事件对象的属性 e.preventDefault(); 来禁用；
selectstart 开始选中 —— 用 e.preventDefault(); 来禁止鼠标选中。
鼠标事件对象 MouseEvent：
鼠标事件对象说明e.clientX / Y返回鼠标相对于浏览器窗口可视区的X / Y坐标
（只有数值没有单位）
e.pageX / Y返回鼠标相对于文档页面的X / Y坐标 e.screenX / Y返回鼠标相对于电脑屏幕的X / Y坐标
（7）键盘事件
键盘事件触发条件onkeyup某个键盘被松开时触发
onkeydown某个键盘被按下时触发，按下不松开时会一直触发
onkeypress与onkeypress相同，只是不能识别ctrl、shift、箭头等功能键
keydown 和 keypress 都有时，先执行 keydown，后执行 keypress；
keyup 和 keydown 事件不区分字母的大小写，而 keypress 区分字母大小写。
键盘事件对象 KeyboardEvent：
键盘事件对象说明e.keyCode返回触发按键的ASCII码值，可用于判断用户按下了哪个键
10.4
