js中API基础参考文档

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；