js-DOM学习
在学习DOM的时候，主要是对页面元素进行操作，无非就是对页面元素进行增删改查的操作，接下来就来学习一下DOM的一些常规操作。
1.如何获取页面的元素
- ·1.根据ID获取
document.getElementByid('ID')
获取单个页面元素，
参数是字符串
返回的是object类型，没有则返回null
- 2.根据标签名
getElementByTagName('标签名')
返回的是元素对象的集合
- 3.通过HTML5新增的方法
1.根据类名
getElementByClassName('id')
根据雷鸣获取元素，获取的是一个元素集合
2.选择器 (常用)
querySelector('#ID')
根据选择器进行选择
返回指定选择器的第一个元素对象，获取单个
里面的选择器需要加符号
3.选择器 （常用）
querySelectAll('li')
返回的是一个元素集合
- 4.特殊元素获取
1.获取body标签
document.body
2.获取HTML标签
document.documentElement;
2.事件三要素 （重点）
1.事件源：要触发的对象
2.事件类型：触发什么事件
3。处理程序：做什么
3.鼠标常用事件（重点）
1.click 鼠标点击事件
2.mouseover 鼠标经过事件
3.mouseout 鼠标离开事件
4.focus 获取焦点
5.blur 失去焦点
6.mousemove 鼠标移动触发
7.mouseup 鼠标弹起
8.mousedown 鼠标按下
9.input 表单内容改变
10.change 内容改变触发事件
11.mouseenter 鼠标移入
12.mouseleave 鼠标移除
4.mouseover和mousemove的区别：
前者只执行一次，mousemove是鼠标移动到指定位置会一直触发。
5.操作元素对象的属性
- 1.非表单元素
1.element.innerText=''; 设置标签中的文本内容
2.element.innerHTML='' 设置标签中的内容，会解析html标签
3.element.src=''; 设置图片的路径
4.element.title='' 设置标题 鼠标悬停在图片上显示的提示文本
5.element.href='' 设置表单中的内容
- 2.表单元素
1.input.value=‘’ 设置表单中的内容
2.input.type='' 设置表单的类型
3.input.disabled=true 是否禁用（true表示禁用 false表示可用）
4.input.checked=true 是否选中（true表示选中 false表示不选中）
5.input.selected=true 是否选中
- 3.样式的操作
element.style.属性名=''
特点： 设置数量较少的样式，权重高，可以接受变量
element.className=''
特点： 会覆盖原来的类样式，设置较多的样式，权重不高，
6.排他思想：（重点）
1.使用for循环变量所有的元素，然后把他们元素设置样式为空
2.循环结束给当前元素设置样式。
7.H5自定义属性(重点)
1.获取自定义属性： element.getAttribute(属性名)
2.设置自定义属性：element.setAttribute(属性名，属性值)
3.移除自定义属性：element.removeAttribute(属性名)
H5规定自定义属性必须以date- 开头
dateset是一个集合里面存放了所有以data开头的自定义属性
8.节点操作 (重点)：
1.获取父节点 （常用）：
element.parentNode()
2.获取子节点 （常用）:
element.children();
3.获取子节点：
element.childNodes
4.获取第一个节点|元素
element.firstChild
element.firstElementChild
5.获取最后一个子节点|元素
element.lastChild
element.lastElementChild
6.获取殇一二兄弟节点|元素
element.previousSibling
element.previousElementSibling
7.获取下一个兄弟节点|元素
element.nextSibling
element.nextElementSibling
9.动态添加节点
1.使用element.innerHTML='';
2.创建元素，然后添加
var li=document.createElement('li');
parent.appendChild(li); //在父元素最后面追加子元素
parent.insertBefore(li,参照的元素) //在父元素最前面追加子元素
10.节点操作：
1.删除节点 （常用）
parent.removeChild(child) 只能父亲删除儿子
2.克隆节点 （常用）
element.cloneNode(false|true)
false代表浅克隆，只会克隆标签
true代表深克隆，克隆所有内容
11.创建节点的三种方式
document.write()
特点：如果当页面已经渲染完毕，再次触发这个方法的话，会覆盖原来页面的所有内容
element.innerHTML
特点：效率高，结构不方便查看，也不方便进行事件的注册
document.createElement()
特点： 效率比innerHTML低一些，但是结构比较清晰，方便去进行事件的注册
12.注册事件的方法： （重点）
1.传统方式
btn.onclick=function(){
}
2.添加监听
btn.addEventListener('click',fn,flag)
flag:false代表的是事件冒泡
flag:true代表的是事件的捕获
13.注销事件的方式 （重点）
1.传统方式
btn.onclick=null;
2.监听方式
btn.removeEventListener('click',fn) //事件 函数
14.事件的三个阶段 （重点）
- 1.捕获阶段
- 2.目标阶段
- 3.冒泡阶段
15事件对象 （重点）
1.什么是事件对象：
描述一件事情的对象，里面封装了这次事件相关的数据信息
2.事件对象的属性 （重点）
e.target 获取触发事件的对象
e.type 获取事件类型
e.pageX|pageY 获取鼠标在页面中的位置
e.clientX|clientY 获取鼠标在可视区的位置
e.screenX|e.screenY 获取鼠标在屏幕中的位置
3.阻止冒泡
e.stopPropagation();
4.阻止默认行为
e.preventDefault();
16.什么是事件委托 （重点）
原理：使用的是事件冒泡
本应该给子元素绑定的事件，给父元素去设置，这样一旦我们点击了子元素
，就会通过事件冒泡给父元素父元素的事件，然后我们可以通过事件对象.target
就能够得到目标元素。
17.键盘事件
keydown 当键盘按下的时候触发 识别功能键
keypress 当键盘按下的时候触发 不识别功能键
keyup 当键盘擡起的时候触发
我们可以通过事件对象 e.keyCode 来获取键盘按下对应按键的 asicc 码
BOM学习
1.窗口加载事件（重点）
页面所有元素加载完毕的时候调用
1.window.load=function(){}
2.window.addEventListenner('load',function(){});
3.DOMCotentLoaded Dom元素渲染完毕的时候调用
2.resize窗口改变的时候调用
方法：
获取窗口的宽高
1.window.innerWidth
2.window.innerHeight
3.两种定时器
第一种
var time=setTimeout(function(){},事件)
返回值是定时器的标识，这个标识可以用来清除定时器
clearTimeout(time) //清除定时器
第二种（常用）
var time=setInterval(function(){},间隔时间)
clearTimeout(time) //清除定时器
区别：
setTimeout只会执行一次，setInterval可以重复进行执行
4.this指向问题 （重点）
1.在全局作用域下、普通函数、定时器的this执行都是指window
2.在方法中谁调用了this就指向谁
3.在构造函数中调用指向的就是当前对象
5.js执行的机制（重点）
js执行机制中分为同步任务和异步任务，首先代码在执行的时候先执行执行栈中的同步任务，
如果在执行过程中遇到回调函数就会通过异步进程判断他是否进行了事件操作如果是把
他放到异步任务队列当中，然后再继续执行，当同步任务执行完毕之后，系统会按次序读
取任务队列中的异步任务。如果有就把他放到执行栈中执行
事件循环：
由于主线程不断地重复获得任务，执行任务，再次获取任务，再执行，这种机制被称为事件循环
6.window里面的内置对象
location对象：
location.href 获取的是地址栏的url，要是赋值用来跳转页面
location.search 获取url后的参数 ?号后面的都是参数
location.reload( false|true) false代表普通刷新，有缓存就用缓存，没有就去请求服务器，设置true强制刷新，直接请求服务器
location.assign() 跳转页面
location.replace() 跳转，不存在历史记录中，就不能进行回退
navigation对象
userAgent 获取的是客户端的类型（浏览器，手机，平板）
history
history.forward() 前进
history.back() 后退
history.go() 整数代表前进，负数代表是后退
7.三大系列：
offset系列
获取的是元素的偏移量，参照的是带有定位的父辈元素，如果父辈元
素没有定位，参照的是body
element.offsetTop|offsetLeft
获取的元素的宽高， padding + border + 内容
element.offsetWidth|offsetHeight
获取的是带有定位的最近的父辈元素，如果父辈元素都没有定位，那么获取的是body
element.offsetParent
client系列
获取的是左边框|上边框的宽度
element.clientLeft|clientTop
获取的是元素宽高， padding + 内容
element.clientWidth|clientHeight
scrool系列
scrollLeft|scrollTop
水平|垂直方向滚动出去的距离
scrollWidth|scrollHeigh
内容的真实宽度|高度
滚动整个页面的时候， window.pageYOffset
8.自动调用函数（立即执行函数）
好处：防止命名污染
(function(){})()
(function(){}())
9.mouseenter 与 mouseover的区别
mouseenter 不会进行事件冒泡
mouseover 是会进行事件冒泡
10.动画的原理
利用定时器 setInterval，在定时器的函数中，先获取到当前盒子的位置，然后加
上移动的距离，最后把这个值设置给当前元素的偏移就好
缓动动画：
var step= (目标位置- 当前盒子的位置)/10
把这个step + 盒子当前的位置，就是最后要设置给盒子的偏移量
11.节流阀的概念
防止用户点击过快，导致我们的轮播图切换的速度变快
让我们代码执行完了之后，再去执行其他的代码逻辑
使用节流阀
1.设置一个boolean的变量来控制
2.当我们的轮播图的动画开始执行的时候，把这个boolean类型的值设置为false，当动画执行完毕的时候，把boolean类型的值设置成true
12.移动端的事件
touchstart
触摸到了屏幕
touchmove
手指在屏幕中滑动
touchend
手指离开屏幕
13.移动端有特殊的事件对象
touchEvent 触摸事件
touches
获取的是正在触摸屏幕的所有的手指对象的集合
targetTouches
获取的是触摸当前元素对象的所有的手指对象的集合
changedTouches
获取手指个数发生改变的手指对象的集合，从无到有，从有到无，添加手指
，移除了一个手指
14.类名操作
element.classList.add() 添加类名
element.classList.remove() 移除类名
element.classList.toggle() 切换类名 没有这个类名会进行添加，有这个类名会进行删除
15.缓存（重点）
sesstionStorage
生命周期：关闭当前窗口，那么缓存数据就没有了
存储大小：5M
方法
sesstionStorage.setItem(key,value) key代表是属性名 value 代表是属性值
sesstionStorage.getItem(key) 获取缓存数据
sesstionStorage.removeItem(key) 移除缓存数据
sessionStorage.clear() 清空
localStorge
生命周期: 永久生效，除非手动进行删除
存储大小: 20M
方法
localStorage.setItem(key,value) key代表是属性名 value 代表是属性值
localStorage.getItem(key) 获取缓存数据
localStorage.removeItem(key) 移除缓存数据
localStorage.clear() 清空