API：应用程序编程接口;
概念：预先定义好的函数（方法）；
特征： 任何开发商语言都有自己的API；
API的输入和输出；
API的使用方法（console.log(）);
Web API: 浏览器提供的一套工具，来操作浏览器的功能（页面的元素）；
JS 的组成：ECMAScript：基础语法；
BOM: 浏览器对象模型；操作浏览器功能的API;
DOM：文档对象模型；操作页面元素的API；文档里所有的类型都是对象；
DOM: 是一个树形的结构；
- 文档：一个网页可以称为文档
·- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
- 元素：网页中的标签
- 属性：标签的属性
常用操作：
- 获取元素
- 对元素进行操作(设置其属性或调用其方法)
- 动态创建元素
- 事件(什么时机做相应的操作)
就是HTML文档抽象出来的很多的对象；
获取元素：
1：ID 获取
var元素对象变量 = document.getElementById(元素ID);
得到是的是一个元素；如果没有查询到，返回一个null；
2：标签 获取
var元素对象变量 =document.getElementsByTagName（‘标签名’）
根据标签名获取一个元素的伪数组；如果没有查询到，返回的是一个空数组；元素集合是动态的，体现在对页面元素进行操作（添加， 删除， 替换）伪数组中元素对象会随之改变；
3：根据class属性获取元素：
document.getElementsByClassName（）
4：根据name属性获取元素：
document.getElementsByName（）
5：根据css选择器获取页面第一个元素
querySelector()
6：根据css选择器获取页面所有元素
querySelectorAll()事件驱动：
事件：三个要点：
1：事件源：发生事件的那个东西；（触发(被)事件的元素）；
2：事件处理程序（监听器）：当事件发生之后，处理事件的程序（事件触发后要执行的代码(函数形式)）；
3：事件：发生的那件事；（click 点击事件）；
开发事件的流程：
1：创建一个事件源；
2：编写一个事件处理函数（监听器）
3：绑定事件源和处理函数；1：得对象 2：绑定事件处理函数
属性操作：
非表单元素：
this的几种情况
// 1 普通函数中的this -> window
// 2 构造函数中的this -> 是当前构造函数创建的对象
// 3 方法中的this -> 方法所属的对象
// 4 事件处理函数中的this -> 事件源，谁调用的该事件this就指向谁
取消a标签的默认跳转：return false;
innerHTML：获取的标签和内容（原封不动）；
清空内容 id.innerHTML= ’ ';
赋值：id.innerHTML=‘要赋值的内容’；有标签的话也会解析；
innerText：只获取内容（前后空白都会去掉）；
赋值：id.innerText=‘要赋值的文本内容’；有标签的话不会解析；
处理innerText和textContent的兼容性问题
设置标签之间的内容
function setInnerText(element, content) {
判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
然后调用函数: setInnerText(element, content);通用属性： id className name
表单元素的属性:
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用标签元素
disabled =true; 则禁用
- checked 复选框选中属性（是否选中）
- selected 下拉菜单选中属性（是否选中）
事件先关属性：
点击：元素对象.onclick；
获得焦点：元素对象.onfocus；
失去焦点：元素对象.onblur；
随机生成索引： parseInt(Math.random() * 索引长度);
文本框为空：text.value.length ===0;
当标签属性只有一个值的时候，那么它的这个属性的数据类型就是布尔型，可以用true和false来操作
自定义属性：
获取标签行内属性: 标签名或id.getAttribute() ;
创建标签行内属性: setAttribute(“第一个属性名”，第一个属性值 ) ;
删除自带属性或自定义属性： removeAttribute(“属性名”)；
样式操作：
style操作（设置一个样式属性）：
使用style方式设置的样式显示在标签行内；宽度高度要带单位；
优先级更高；
类名操作（当设置多个样式属性时）：
修改标签的className属性相当于直接修改标签的类名；
当鼠标移入 onmouseover；
当鼠标移出 onmouseout；
模拟DOM的结构：
节点：
元素节点
属性节点
文本节点
注释节点
创建一些具有相同属性的对象，用构造函数；
获取对象没有的属性，属性值为undefined；
节点层级：
获取父节点：parentNode（只有一个）
获取子节点：childNodes （很多个）
获取所有子元素：children （标签里面不能包含注释）是个伪数组
判断是否有子节点：hasChildNodes
父元素.firstChild 获取第一个子节点；如果为空，返回null
父元素.lastChild 获取最后一个子节点； 如果为空，返回null
父元素.firstElementChild 获取第一个子元素；如果没有，返回null
父元素.lastElementChild 获取最后一个子元素；如果没有，返回null
处理兼容性函数：
// 获取第一个子元素
function getFirstElementChild(element) {
var node, nodes = element.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}点击a标签不会跳转： 最后也要写 return false；
兄弟节点：
nextSibling 下一个兄弟节点；如果没有下一个返回null；
previousSibling 上一个兄弟节点；
nextElementSibling 下一个兄弟元素；
previousElementSibling 上一个兄弟元素；
处理兼容性函数：
// 获取下一个兄弟元素
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}return null;
}动态创建元素：
document.write()：
不能在触发事件中使用，会把之前的整个页面；
.innerHTML（操作字符串）：
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()（操作对象）:
var div = document.createElement('div');
document.body.appendChild(div);追加
appendChild添加元素
removeChild删除元素常见元素操作方法：
insertBefore（要插入的元素，插入的位置）把元素插入到页面指定位置；
replaceChild（要插入的元素，替换元素的位置）把当前元素的标签进行替换；提取对象元素的时，用到循环每拿走一个总长度会缩短，索引会发生变化，不能全部提取，所以需要一个变量来保存总长度，固定变量不会变化，代码可以进行。
如果使用.innerHTML来移动子元素的话。子元素的时间会丢失；
注册事件：
1：触发对象.onclick;
2：触发对象.addEventListener（‘click’，执行函数，false）；
false代表把事件注册到冒泡阶段，true是把事件注册到捕获阶段；
3：触发对象.attachEvent （‘onclick’，执行函数）；
处理兼容性问题：
// 处理注册事件的兼容性问题
// eventName, 不带on， click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}移除事件：
1：触发对象.onclick = function () {
移除事件
元素对象.onclick = null;
}
2：removeEventListener
如果想要移除事件，注册事件的时候不能使用匿名函数，需要注册函数
function btnClick () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);事件的三个阶段：
// 第一个阶段： 捕获阶段（事件还未执行，可以阻止）
// 第二个阶段： 执行当前点击的元素（发生在事件到达目标元素对象）
// 第三个阶段： 冒泡阶段（事件结束后向外传播的过程（信息））
冒泡：
当子元素发生某个事件后，会把发生的事件相父级元素传播，父级元素也可以接受到相同的事件信息。
冒泡的条件：嵌套关系（父子关系），注册了相同的事件；
委托事件：（原理 用事件冒泡来完成事件的注册，可以捕获子元素发生的事件）；
依赖于 事件冒泡，事件对象；
需要给执行函数一个形参 e ；
e 事件参数（事件对象）：当事件发生的时候，可以获取一些和事件相关的数据；
e.target 是真正触发事件的对象；
处理事件对象的浏览器兼容性： e = e || window.event;事件对象：
e.eventPhase 获取事件的阶段；
e.type 获取事件类型（可以用swith来进行判断）；
e.target 获取真正触发事件的对象
e.currentTarget 事件处理函数所属的对象，和this一样；
如果事件处理函数绑定在事件源上：
eventPhase 的值为2；意思是事件的执行的阶段；
target 就是当前的事件源；
currentTarget 就是当前对象；
this 也是当前对象；
如果把事件处理函数绑定在事件源父元素对象上：
eventPhase 的值为3；意思是事件的冒泡阶段；
target 就是实际上发生事件的元素对象（子元素对象）；
currentTarget 就是当前父元素对象；
this 也是当前父元素对象；documentElement是整个文档的根（html）；
鼠标事件：
获取鼠标当前点击的坐标（浏览器的可视区域）：
- clientX/clientY 所有浏览器都支持，窗口位置；
获取鼠标相对于当前页面的位置：
- pageX/pageY IE8以前不支持，页面位置；
page兼容性问题
pageY =clientY +页面滚动出的距离；
console.log(document.body.scrollLeft);横向滚动的距离；
console.log(document.body.scrollTop);纵向滚动的距离；
跟随鼠标：（onmousemove鼠标移动）
获取目标要在事件处理函数外面进行；
给整个文档doucment添加事件；
目标的坐标是相对于整个文档的坐标，所以要用page来获取鼠标的位置；
最后也要加单位；
代码：
var tu =document.getElementById('tu');
//跟随鼠标：（onmousemove鼠标移动）
//在整个文档移动就要用document
document.onmousemove = function(e) {
e = e || window.event;
tu.style.top= e.pageY -10 +'px';//上下
tu.style.left= e.pageX -10 +'px';//左右
}
获取鼠标在盒子中的位置 = 鼠标的坐标（基于整个页面文档来说）- 盒子的坐标；
获取盒子当前的坐标：offsetLeft ，offsetTop，（只读属性）取消默认行为的执行：
return false；√；
DOM标准方法： e.preventDefault();√
IE的老版本，非标准方式e.returnValue = false;
阻止事件冒泡：
DOM标准方法：e.stopPropagation();停止事件传播；√
老版本的IE支持：e.cancelBubble = true;
键盘事件：
onkeydown 键盘按下的时候；
onkeyup 键盘弹起的时候；
区别：
keydown的时候我们所按的键还没有落入文本框；（有机会取消）；
keyup键盘弹起的时候按的键已经落入文本框；
e.keyCode ：键盘码；BOM（浏览器对象模型）：
BOM的顶级对象window；所以的对象都是Window对象的属性和方法；（可以省略 ） 所有的全局变量和函数，都是window对象的属性和方法；
定义的全局变量都属于Window，都是Window对象的属性；
定义变量的时候如果和Window重名，只能获取不能赋值；
document是window的子属性；
常用对话框：
alert 提示框；
prompt 输入框；
confirm 确定（true）或取消（false）；
跳转
onload: 页面加载完成之后执行：（一般写在head里面，等页面加载完成后再执行）；
页面加载完成：页面上所有的元素创建完毕，并且引用的外部资源下载完毕（js css 图片）；
onunload: 页面写在的时候执行；
在onunload中所有的对话框都无法使用；
定时器：
setTimeout（要执行的函数，间隔的时间毫秒）隔一段时间执行，执行一次；
取消定时器的执行：
先创建一个变量等于函数事件；
clearTimeout（变量名）；
setInterval （要执行的函数，间隔的时间毫秒）隔一段时间执行，执行多次；
取消定时器的执行：
先创建一个变量等于函数事件；
clearInterval（变量名）；获取盒子当前的位置 offsetLeft offsetTop；
location（位置）：
location可以获取或者设置浏览器地址栏的URL；
location.href：获取和设置页面跳转；
location.assgin（）：可以让页面跳转到指定的地方；
location.replace（）：替换掉地址栏中的地址，不记录历史（不可以后退）；
location.reload（）：重新加载；true：强制从服务器获取页面，false：如果浏览器有缓存的话，直接从缓存获取页面；f5: 强制刷新，从服务器获取；URL：统一资源定位符；
格式：协议://主机名ip地址:端口号/资源路径？参数#锚点;
对应location对象额属性：protocol://hostname:port/pathname?search#hash;
history：
second 前进；
back 后退；
go（）整数是前进，负数是后退，0 是刷新；
navigator.userAgent：检测浏览器
大小位置相关的属性（尺寸属性）：
offset（主要用于定位，相对于父元素可视区域左上角的偏移量）：
偏移量 （相对于最近的一个定位的父元素进行偏移的一组属性）
offsetParent ：获取距离当前元素最近的定位父元素，如果没有定位父元素，是body
获取坐标：offsetTop，offsetLeft；
获取大小：
offsetWidth，offsetHeight；
盒子的实际大小，包括内容，边框和padding；
client：（主要用于可视区域，包含内容和内边距）：
clientTop ：上边框的宽度，clientLeft：左边框的宽度，
获取内容和内边距的大小,不包括边框，如果有滚动条需要减去；
clientWidth ，padding的宽度+内容物的宽度-滚动条的宽度；
clientHeight，padding的高度+内容物的高度-滚动条的宽度；
scroll：（用于子元素的宽或高大于父元素内容物（可视区域）的宽高之后，内容的真实大小）
内容滚动出去的距离：scrollTop；scrollLeft；
内容的大小包括padding和未显示的内容，不包括滚动条：
scrollWidth，父元素的 左padding+子元素的widht
scrollHeight；父元素的 上padding+子元素height
如果没有设置子元素的宽度，scrollWidth=clientWidth
父元素的可视区域-滚动条的宽度 = padding左右+内容物的宽度Width-滚动条的宽度（17px）；
onmousedown：鼠标按下；
onmouseup：鼠标松开；
onmouseenter，onmouseleave；不会触法事件冒泡；
拖拽：
// 当鼠标按下的时候，求鼠标在盒子中的位置
// 鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子的位置
// 盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子中的位置
//赋值给盒子的坐标
// 当鼠标弹起的时候，移除鼠标移动事件
document.onmousemove = null;
模拟滚动条：滚动条动的时候 内容的位置求法：
当拖拽滚动条的时候，改变内容的位置
1 内容滚动的距离 / 内容最大的滚动的距离 = 滚动条滚动的距离 / 滚动条滚动的最大距离;
2 求内容最大的滚动的距离 = 内容全部高度 - 盒子的高度；
3 求滚动条滚动的最大距离 = 滚动条所在盒子的高度 - 滚动条的高度；
4 内容滚动的距离 = 滚动条滚动的距离 / 滚动条滚动的最大距离 *内容最大的滚动的距离
5 赋值 为负数；
xx.click（）；触发按钮的点击事件方法（模拟，自动点击）；
轮播图：
处理箭头和li 序号不跟随导致的bug：让箭头的序号（全局变量）和 li 的序号相等 确保每次点击li的时候，箭头的序号也要跟的上；
xx.cloneNode（）；克隆复制 ： true 克隆节点（标签）与内容；false 只克隆节点（标签）；
.onscroll 页面滚动；
获取页面滚动出去的距离：document.body.scrollTop；
document.documentElement.scrollTop；
