Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
一、获取元素
1.ID获取
var element=document.getElementById();
返回的是一个元素对象；console.dir(element) 打印返回的元素对象，可查看里面的细节
2.标签名获取
document.getElementByTagName('标签')；
3.类名获取
document.getElementsByClassName('类名')；
4.选择器获取
document.querySelector('选择器')；（当有多个相同选择器，会选中选择器的第一个元素对象；选择器如是类或id，选择器前应加上对应的符号，标签则不用）
document.querySelectorAll('选择器')；（选择器的所有对象）
5.特殊元素获取
获取body元素
document.body
获取html元素
document. documentElement
二、操作元素
1.改变元素内容
element.innerText
不识别html标签；去除空格和换行
element.innerHTML（常用）
识别html标签；保留空格和换行
2.修改表单元素
this.disabled=true;（让某个表单被禁用）
this指向事件函数的调用者
3.修改样式属性
element.style
通过此方法修改style样式，产生的是行内样式，CSS权重较高
element.className
通过修改元素的类名来更改样式，使用于样式较多或功能较复杂的情况
4.排他思想
先排除其他，再设置自己的样式
5.自定义属性的操作
1.获取属性值
Element.属性
获取元素本身自带的属性，如id
element.getAttribute('属性')；
获取自定义属性,自己定义的属性，如index
2.设置属性值
element.属性='值'
设置内置属性值
element.setAttribute('属性', '值')；
主要设置自定义属性
3.移除属性
element.removeAttribute('属性')；
4.H5自定义属性
为了判断元素是内置属性还是自定义属性，H5规定自定义属性data-开头作为属性名并且赋值
三、节点操作
1.父节点
Node.parentNode（返回的是最近的一个节点，没有父节点返回null）
2.子节点
①parentNode.childNodes（返回值包括所有子节点，元素与文本节点，获取元素节点需再次处理，不提倡）
②parentNode.children（非标准，但实际开发常用）
③parentNode.firstChild（第一个子元素，返回值包括所有子节点，元素与文本节点，获取元素节点需再次处理，不提倡）
④parentNode.lastChild（最后一个元素，返回值包括所有子节点，元素与文本节点，获取元素节点需再次处理，不提倡）
⑤parentNode.firstElementChild（IE9以上支持）
⑥parentNode.lastElementChild（IE9以上支持）
⑦parentNode.children[0]（返回第一个子元素，开发常用）
⑧parentNode.children[parentNode.children.length-1] （返回最后一个子元素，开发常用）
3.兄弟节点
①node.nextSibling（返回当前元素下一个兄弟节点，返回包含所有节点）
②node.previousSibling（返回当前元素下一个兄弟节点，返回包含所有节点）
③node.nextElementSibling（返回当前元素下一个兄弟节点，IE9以上支持）
④node. previousElementSibling（返回当前元素下一个兄弟节点，IE9以上支持）
4.创建和添加节点
动态创建节点
document.createElement()
添加节点
- node.appendChild(child) （node父级 child子级，添加到父节点的子节点末尾）
- node.insertBefore（child,指定元素） （添加到父节点的子节点前面）
5.删除节点
node.removeChild(child)
6.复制节点
node.cloneNode() （括号里为空或false时，只复制标签，不复制内容，是浅拷贝；括号里填true，会复制标签与内容，是深拷贝）
拓展：
三种动态创建元素比较
Document.write() （写入页面内容流，会导致页面全部重绘）
Element.innerHTML （将内容写入某DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要采取拼接字符串，采取数组形式拼接，虽然结构复杂一点））
Document.createElement() （结构清晰，创建多个元素效率低）
四、事件
1.注册事件
传统方式
btn.onclick
方法监听注册方式
（同个元素和事件可以添加多个侦听器）
addEventListener(type,listener[,useCapture])（IE9以上支持，可用attachEvent()代替（非标准））
2.删除事件
传统方式
eventTarget.οnclick=null
方法监听注册方式
eventTarget.removeEventListener(type,listener[])
五、DOM事件流
（事件传播过程）
- 捕获阶段（addEventListener的第三个参数为true,处于捕获阶段）
- 当前目标阶段
- 冒泡阶段（addEventListener的第三个参数为false或空,处于冒泡阶段）
注：实际开发常用事件冒泡，但onblur onfocus onmouseenter onmouseleave这些事件没有冒泡
六、事件对象
（无兼容问题时：event
考虑兼容问题时： window.event(ie678)
解决无论是否兼容：e=e||window.event）
1.常见事件对象的属性和方法
e.target和this区别
e.target返回的是触发事件对象（元素）
this返回的是绑定事件的对象（元素）
2.阻止默认行为
-
- e.preventDefault()普通浏览器
- e.returnValue低版本浏览器
- return false;无兼容问题，只限传统注册方式
- 阻止事件冒泡
- e.stopPropagation();
- window.event.cancelBubble=true;
3.事件委托
原理：事件监听器设置在父节点上，利用冒泡原理影响每个子节点（只操作一次DOM，提高程序性能）
七、BOM
1.定时器
setTimeout(调用函数，延迟时间)；这个函数也称为回调函数callback，只调用一次
setInterval(调用函数，间隔毫秒数)；每隔间隔的毫秒数就去调用一次回调函数
2.停止定时器
clearTimeout(定时器标识符);
clearInterval(定时器标识符);
-
3.this指向问题
- 全局作用域和普通函数的this指向全局对象window
- 方法调用中谁调用thhis指向谁
- 构造函数中this指向构造函数的实例
4.JS执行机制
同步任务（console.log()）：轮流进行
异步任务（回调函数）：同时进行
- 普通事件，如click,resize
- 资源加载，如load,error
- 定时器，如setInterval,setTimeout
先等待执行栈中的同步任务执行完毕，
任务队列中的异步任务再进入执行栈中执行
事件循环：主线程不断重复获得、执行任务的机制
5.location对象
（location属性用于获取、解析或设置URL）
location对象的属性
location.href 获取或者设置整个URL
location.search 返回参数
ocation对象的方法
location.assign() 跳转页面，能后退
location.replace() 替换当前页面，不能后退
location.reload() 重新加载页面
6.navigator对象
可以判断用户用手机还是电脑打开页面
7.history对象
back() 后退
forward 前进
go（参数）参数1，则前进一页，参数为-1，则后退一页
八、PC端网页特效
1.offset
（动态获得元素的位置信息）
//offset与style区别
offset更适合获取元素位置
style更适合更改元素值
2.client
（用来获取该元素的元素、边框大小）
3.scroll
返回自身实际的宽度，常用于滚动
4.立即执行函数
（作用是独立创建了一个作用域，变量为局部变量，不会有命名冲突）
( Function() {} ) () 或 ( Function() {} () );
5.mouseenter和mouseover的区别
mouseover经过自身和子盒子都会触发，会冒泡；mouseenter只会经过自身盒子会触发事件
6.动画原理
获得盒子当前位置；
在当前位置加1个移动距离
利用定时器不断重复操作
设置结束定时器条件
7.节流阀
当上一个函数执行完毕，再执行下一个函数动画，防止时间的连续触发
先设置var flag=true;
执行时关闭flag=false;
利用回调函数动画执行完毕再打开flag=true;
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
