概述
本篇文章是对于JS中WebApi的知识点的全面的总结，文章的内容仅代表个人理解，欢迎各位指正及补充
DOM
1. 概念
DOM全称文档对象模型（document object model）,主要作用是用来操作页面元素
2. 获取元素
<body>
<div class="father" id="father">
<p class="previou"></p>
<div class="children"></div>
<span class="next"></span>
<span></span>
</div>
<script>
//根据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;
</script>
</body>
3. 操作元素
3.1操作已有元素
<script>
//设置或者修改类名
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
</script>
3.2操作自定义属性
<script>
//设置自定义属性
element.setAttribute(key,value)
//获取自定义属性
element.getAttribute(key)
//移除自定义属性
element.removeAtrribute(key)
//H5推荐我们自定义属性写法,以 data- 开头命名属性
element.dataSet
</script>
节点操作
<script>
//创建节点
//注意：创建的元素在内存中，此时还没有在页面上
document.createElement()
//不加等号获取，加等号创建，如果有则会覆盖原有的,插入多个元素的时候，结合数组的方式，创建的效率最高
element.innerHTML = ''
//覆盖之前的内容，导致页面重绘
document.write()
//添加节点
//追加子元素
element.appendChild()
//插入到参照元素的前面
element.insertBefore(child, 参照元素)
//克隆节点
//true 深拷贝,拷贝标签还拷贝里面的内容
//false 或者不写 浅拷贝,只拷贝标签
element.cloneNode()
//删除节点
//只能去移除子元素
element.removeChild(child)
//自杀
element.remove()
</script>
BOM
1.概念
BOM全称浏览器对象模型（Browser Object Model）
2.页面加载事件
<script>
//当页面的所有资源加载完毕触发,包含外部资源
window.addEventListener('load', function () {})
//当DOM元素加载完毕触发
window.addEventListener('DOMContentLoaded', function () {})
//页面显示的时候
window.addEventListener('pageshow', function () {})
//页面关闭执行
window.addEventListener('unload', function () {})
//关闭之前执行
window.addEventListener('beforeUnload',function () {})
</script>
3.窗口大小事件
<script>
window.addEventListener('resize', function () {})
</script>
4.定时器
<script>
//只触发一次
var timer = setTimeout(function () {
alert('11')
},2000)
//移出定时器
clearTimeout(timer);
//触发多次,每隔两秒执行一次
var timer1 = setInterval(function () {
alert('11')
},2000)
//移出定时器
clearInterval(timer1)
</script>
5.内置对象
<script>
//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()
</script>
事件
1.事件三要素
- 事件源
- 事件类型
- 事件处理函数
2.事件注册
<script>
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)
</script>
3.事件流
- 事件捕获（从外到内一层一层传递，直到目标阶段）
- 目标阶段
- 事件冒泡（从内到外一层一层往外冒，直到window）
4.事件对象
事件对象是用来描述此次事件一些相关数据
常用的属性与方法
<script>
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
})
</script>
5.事件委托
本应该设置子元素身上的事件，设置给了父元素，利用事件冒泡的特性，让子元素的事件冒泡给父元素，可以通过事件对象.target 就可以获取到目标元素
6.常用事件
| 事件类型 | 事件描述 |
|---|---|
| click | 点击事件 |
| focus | 焦点事件 |
| blur | 失去焦点 |
| keydown | 键盘按下事件 |
| keyup | 键盘弹起事件 |
| keypress | 键盘按下 |
| mouseover | 鼠标移入 |
| mouseenter | 鼠标移入 |
| mouseleave | 鼠标移出 |
| mouseout | 鼠标移出 |
| input | 输入事件 |
| mousedown | 鼠标按下 |
| mousemove | 鼠标移动 |
| mouseup | 鼠标松开 |
| dblclick | 双击事件 |
| scroll | 滚动事件 |
扫一扫
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
