WebAPI知识点全面总结
概述 本篇文章是对于JS中WebApi的知识点的全面的总结，文章的内容仅代表个人理解，欢迎各位指正及补充
- DOM
- BOM
- 事件
- JS执行机制
- 本地存储
- 节流阀
DOM全称文档对象模型（document object model）,主要作用是用来操作页面元素
2. 获取元素
class="next">
>
>
//根据ID获取
var fatherId = document.getElementById('father');
//根据类名获取,此处获取的是个伪数组
var father = document.getElementsByClassName('father');
//根据标签名获取,此处获取的是个伪数组
var p = document.getElementsByTagName('p');
//H5新增选择器获取,在括号内直接填写选择器就行，支持复合选择器
//查找单个
var children =document.querySelector('.children');
//查找多个
var span = document.querySelectorAll('span');
//通过节点获取元素
//获取父节点
children.parentNode;
//获取子节点,所有元素子节点，childNodes 属性返回所有的节点，包括文本节点、注释节点
fatherId.children;
//获取上一个兄弟元素
children.previousElementSibling;
//获取下一个兄弟元素
children.nextElementSibling;
//获取第一个子元素
fatherId.firstElementChild;
//获取最后一个子元素
fatherId.lastElementChild;
3. 操作元素
3.1操作已有元素
>
//设置或者修改类名
element.className = '';
//设置或者修改行内样式
element.style.backgroundColor = '';
//标签之间的内容获取
//识别标签，不加等号是获取，加等号是设置
element.innerHTML
//不识别标签，不加等号获取，加等号设置
element.innerText//获取到样式表 + 行内样式里面的所有样式
window.getComputedStyle//获取input元素内容
//获取的是选中状态
input.checked
//获取输入框的内容
input.value
//获取输入框的类型
input.type//offset系列
//获取的是最近的有定位的父元素的左边和上边的距离
element.offsetLeft|Top
//获取的是元素的真实宽高,包含内容宽高,padding,border
element.offsetWidth|Height
//获取最近的有定位的父元素
element.offsetParent//client系列
//获取的上边框和左边框的宽度
element.clientTop|clientLeft
//获取的是 宽高,包含内容宽高 + padding
elemment.clientWidth|clientHeight//scroll系列
//获取的是滚动出去的距离水平|垂直
scrollTop|scrollLeft
//获取的是内容的真实的宽高+padding,包含了滚动出去了的文字内容
scrollWidth|scrollHeight
3.2操作自定义属性
>
//设置自定义属性
element.setAttribute(key,value)
//获取自定义属性
element.getAttribute(key)
//移除自定义属性
element.removeAtrribute(key)//H5推荐我们自定义属性写法,以 data- 开头命名属性
element.dataSet
节点操作
>
//创建节点
//注意：创建的元素在内存中，此时还没有在页面上
document.createElement()
//不加等号获取，加等号创建，如果有则会覆盖原有的,插入多个元素的时候，结合数组的方式，创建的效率最高
element.innerHTML = ''
//覆盖之前的内容，导致页面重绘
document.write()//添加节点
//追加子元素
element.appendChild()
//插入到参照元素的前面
element.insertBefore(child, 参照元素)//克隆节点
//true 深拷贝,拷贝标签还拷贝里面的内容
//false 或者不写 浅拷贝,只拷贝标签
element.cloneNode()//删除节点
//只能去移除子元素
element.removeChild(child)
//自杀
element.remove()
BOM 1.概念
BOM全称浏览器对象模型（Browser Object Model）
2.页面加载事件
>
//当页面的所有资源加载完毕触发,包含外部资源
window.addEventListener('load', function () {})
//当DOM元素加载完毕触发
window.addEventListener('DOMContentLoaded', function () {})
//页面显示的时候
window.addEventListener('pageshow', function () {})
//页面关闭执行
window.addEventListener('unload', function () {})
//关闭之前执行
window.addEventListener('beforeUnload',function () {})
3.窗口大小事件
>
window.addEventListener('resize', function () {})
4.定时器
>
//只触发一次
var timer = setTimeout(function () {
alert('11')
},2000)
//移出定时器
clearTimeout(timer);
//触发多次,每隔两秒执行一次
var timer1 = setInterval(function () {
alert('11')
},2000)
//移出定时器
clearInterval(timer1)
5.内置对象
>
//go()方法无参数时，相当于history.go(0)，可以刷新当前页面
//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);
//screen
//返回显示器屏幕的宽度
screen.width
//返回显示屏幕的高度
screen.height//location
//获取地址，跳转
location.href
//获取参数
location.search
//替换当前页面
location.replace()
//true 强制刷新，不会加载本地缓存，直接请求服务器
location.reload()
事件 1.事件三要素
- 事件源
- 事件类型
- 事件处理函数
>
var btn = document.querySelector('button')
/* 区别，传统方式只能绑定一个同名的事件，监听方式可以绑定多个同名的事件 */
//传统方式注册
btn.onclick = function () {}
//监听方式注册
//flag是false或者不写，监听的事件的冒泡,flag 是true 事件的捕获
btn.addEventListener('click',function(){},flag)
btn.addEventListener('mouseover',fn)
function fn () {}
//事件销毁
//传统方式
btn.onclick = null
//监听方式,移出需要将事件处理函数命名才能移出
btn.removeEventListener('mouseover',fn)
3.事件流
- 事件捕获（从外到内一层一层传递，直到目标阶段）
- 目标阶段
- 事件冒泡（从内到外一层一层往外冒，直到window）
事件对象是用来描述此次事件一些相关数据
常用的属性与方法
>
document.addEventListener('click', function(e) {
//获取目标元素
e.target
//获取事件类型
e.type
//阻止默认行为
e.preventDefault()
//阻止事件冒泡
e.stopPropagation()
//鼠标距离页面左上角的位置
e.pageX|pageY
//鼠标距离可视窗口的位置
e.clientX|clientY
//鼠标距离屏幕的位置
e.screenX|screenY
})
document.addEventListener('keyup', function () {
//键盘按下的对应的 ASICC码值
e.keyCode
})
5.事件委托
本应该设置子元素身上的事件，设置给了父元素，利用事件冒泡的特性，让子元素的事件冒泡给父元素，可以通过事件对象.target 就可以获取到目标元素
6.常用事件
| 事件类型 | 事件描述 |
|---|---|
| click | 点击事件 |
| focus | 焦点事件 |
| blur | 失去焦点 |
| keydown | 键盘按下事件 |
| keyup | 键盘弹起事件 |
| keypress | 键盘按下 |
| mouseover | 鼠标移入 |
| mouseenter | 鼠标移入 |
| mouseleave | 鼠标移出 |
| mouseout | 鼠标移出 |
| input | 输入事件 |
| mousedown | 鼠标按下 |
| mousemove | 鼠标移动 |
| mouseup | 鼠标松开 |
| dblclick | 双击事件 |
| scroll | 滚动事件 |
本地存储 链接
节流阀 【WebAPI知识点全面总结】链接
推荐阅读
- 小学英语必考的10个知识点归纳，复习必备！
- (六)Component初识组件
- java|java 常用知识点链接
- 心理学知识点总结（1）
- 怎么看待贵阳大数据交易所的成立
- 华为可翻转全面屏手机专利亮相（折叠方式好比翻书一样）
- 《DOM知识点总结》
- 全面深度剖析（如何找到一份有意义的工作（））
- 带孩子玩转东京，你需要这份最全面的攻略
- 杭州杭城皮肤病研究院好不好（正规医院全面保障你的皮肤健康）