js API部分

1.入门基础知识普及

API就是一堆语言或者软件设计者通过的函数、方法、属性，供开发者使用

DOM是js API的一种，这套工具是用来专门针对html页面中的各个部件，这些部件包括：整个html文档、页面中的标签或者元素、标签中的文本、标签中的属性

本来js和html之间是没有任何联系的,DOM这个API的出现，使得js有了访问html的能力，使得js和html之间建立起了联系

在dom当中，我们把html文档称为文档节点，把标签称为元素或者标签节点，把标签中的文本称为文本节点，把标签中的属性称为属性节点，

我们用dom方法获取到的任何节点都是js对象形式，使用的时候要符合对象的语法，这些对象统称DOM对象，dom对象天生自带一些通用的属性。

2.获取元素的方式

基于整个文档获取元素的方式

var div = document.getElementById('div');  

var divs = document.getElementByTagName('div') 这两种方式用得比较多，通常搭配起来一起使用，后者得到的是伪数组，通常对这个伪数组进行处理

var div = querySelector(),得到匹配的第一个，var divs = querySelecorAll('div') 得到是div的集合

document.getElementByName document.getElementByClassName 这两种用得比较少

基于父元素获取子元素

带element都有兼容性问题，带element都不包括文本节点

父节点.children 这个获得的是伪数组，不包含文本节点，使用频率最高

父节点.childNodes

父节点.firstChild

父节点.firstElementchild

父节点.lastChild

父节点.lastElementChild  

基于子元素获取兄弟元素和父元素

同样带element的有兼容性问题，

子元素.nextElementSibling

子元素.nextSibling

子元素.previousElementSibling

子元素.previousSibling

子元素.parentNode 没有兼容性问题，使用频率最高

遗留DOM的方式查找页面元素

document.body 访问body节点

document.links 访问所有的链接

document.images 访问所有的图片

document.forms 访问所有的表单

document.formName 查找一个表单

3.标签节点的创建、添加、移除、克隆等系列操作

创建元素节点               document.createElement(标签名)

创建文本节点               document.createTextNode(文本内容)

给父元素添加节点         父节点.appendChild(子节点)

在指定位置添加             父节点.insertBefore(新节点，参照节点)

替换节点                        父节点.replaceChild(新节点，旧节点)

移除子节点                     父节点.removeChild(子节点)

克隆节点                          eg: var 变量= 元素.cloneNode(true) 里面带参数表示克隆标签及其里                                             面的内容，不带参数只克隆标签本身

4.文本节点的操作

innerHTML 获取内容的时候，如果内容里面有标签，会把标签也获取到，在设置内容，如果内容当中有标签，那么会对标签进行解析

innerText 获取内容的时候，会过滤掉标签，只获取文本内容。 在设置内容的时候，如果内容有标签，会原样不动的输出标签，不会进行解析，但是有兼容性问题，类似的textContent也有兼容性问题。老版本的firefox浏览器不支持innerText。 2016的时候 已经把innerText 在DOM中规定为正式的标准属性

清空内容 innerHTML 等于空字符串

5.属性节点的操作

属性是属于标签的，所以要对属性进行操作，就必须先找到元素

表单的三大属性：checked，selected，在js当中是布尔值true 或者false

获取属性

var 变量 = 标签.属性名  不能获取自定义属性，获取的img标签的src属性，会得到一个绝对路径 ，对于表单元素的disabled、checked等 获取的值是false或者true

var变量 = 标签名.getAttribute('属性名’) 能够获取自定义属性，获取img标签的src属性，只得到属性的值，对于表单元素的disabled、checked等，获取到的值可能是空。

重点重点：设置的自定义属性一定要通过getAttribute获取，最常见的就是获取设置的下标属性index，获取到的是字符串，还需要转换为数值型

设置元素的属性

标签.属性名 = 值  不能设置自定义属性

标签.setAttribute('属性'，‘属性值’) 能够设置自定义属性

移除元素的属性

标签.removeAttribute('属性名')

判断元素是否有哪个属性

标签.hasAttribute('属性名') 属性存在的话返回的是true，属性不存在的话返回的是false

6.样式操作

设置元素样式

标签.className = '类名'; 前提是css当中提前就已经设置好了这个类

标签.style.样式名称= '值'; 

在设置大小和位置的时候，数值一定要带上单位px。

eg: box.style.width = '200px';

获取元素的样式

var 变量 = 标签.style.样式名称； 只能获取行内样式和js已经设置过的样式

var 变量 = getComputedStyle(元素）.样式名称 非IE浏览器，可以获取元素全部的样式 用得比较少

var 变量 = 元素.currentStyle.样式名称  IE浏览器支持，可以获取元素的全部样式

7.事件

事件对象：事件对象在事件处理函数中获取，事件处理函数的形参就是事件对象

事件对象有兼容性问题，要做兼容性处理    e = e || window.event

鼠标事件：

e.page x / y  鼠标距离页面的位置，包括滚动出去的距离

e.client x / y 鼠标距离页面的位置，不包括滚动出去的距离

e.screen x / y 鼠标距离屏幕的距离

键盘事件：

e.keycode 获取键盘对应的数字

所有事件：

e.target 触发事件的对象

e.type 事件类型

事件绑定

元素.onclick = function(){}

元素.addEventListener(事件名称不带on，function(){}) 一个元素可以同时绑定多个事件 浏览器兼容性问题 IE9以后才支持

元素.attachEvent(on+事件名称,function(){})

事件移除

事件冒泡

当一个元素接受到事件之后，他会把接受到的事件传递给父元素，一直传递到window，传递的只是事件，并不是所绑定的事件处理函数，所以如果父级没有绑定事件处理函数，就算传递了事件，也不会有什么表现

事件的三个阶段：1.事件捕获 2.事件执行 3.事件冒泡

addeventListener:  有事件冒泡，第三个参数为false的时候是事件冒泡，第三个参数为true的时候事件捕获

attachEvent：只有事件冒泡

on绑定事件：只有事件冒泡

事件委托

利用事件冒泡，只指定一个事件处理程序来管理某一类型的事件

原因及优点?   1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

    2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。

事件委托的小案例

取消标签的默认行为

1.return false 用得比较多

2.e.preventDefault() DOM的标准方法

3.e.renturnValue = false  IE的老版本，非DOM的标准方法

取消事件冒泡

1.e.stopPropagation() 停止事件传播 取消冒泡 标准的DOM方法

2.e.cancelBubble = true; 取消冒泡 非标准的方式 老版的IE支持

9.三大属性（offset、scroll、client这个用得最少）

offset 获取到的数值型 后期可能要拼接单位px

offset:边偏移量，相对于最近的定位父元素的偏移量，如果父元素没有定位，那么就以body为标准

offsetparent：最近的定位父元素

offsetLeft 距离最近父元素左距离

offsetTop  距离最近父元素上距离

offsetWidth 内容的宽度+padding+border

offsetHeight  内容的高度+padding+border

scroll

scrollWidth 内容的宽度

scrollHeight 内容的高度

scrollLeft 内容向右滚动出去的距离

scrollTop 内容向上滚动出去的距离

client

clientWidth 内容的宽度+padding

clientHeight 内容的高度+padding

clientTop 边框的宽度

clientLleft  边框的宽度

小案例

核心：1.获取到鼠标在盒子当中的位置 2.通过鼠标在盒子当中的位置求出盒子的坐标 3.限制盒子的坐标，最大值和最小值都不能超出 4.小图片的移动比例和大图片的移动比例是一致的

BOM相关知识

1.onload 页面加载完成 页面上的所有元素都创建完毕，并且的引用的外部资源下载完毕（css/js）

2.定时器：（用来做倒计时和动画）

settimeout：定时炸弹，只能执行一次 （使用比较少）

setInertval：闹钟，隔一段时间重复执行 

第一个参数是事件处理函数，第二个参数是时间，单位为毫秒

清除定时器 clearIneterval，一般清除之前都要设置一个timerId

案例定时器

2.#####动画#####（动画是基于定时器的基础上）

盒子动画的重点： 设置步进step，设置target目标的位置，设置current位置

                              定时器清除的条件

                              给元素设置timerId属性

                             目标位置小于current的时候步调要变为负值

单个盒子的简单动画

封装动画函数