JS之DOM的详细操作(上)

变量声明

var let const 优先声明const只要它不会再进行赋值操作

DOM、DOM树、DOM对象

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能。

DOM树是什么  将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词   作用：文档树直观的体现了标签与标签之间的关系

总结

获取DOM元素

根据CSS选择器来获取DOM元素：

获取第一个元素：

获取多个元素：

返回的结果是一个伪数组

总结：

其它获取DOM元素的方法

DOM修改元素内容

操作元素属性

修改元素常见属性

修改元素样式属性

通过style修改样式

在修改样式遇到background-color时因为有-的存在，会被解析成减号报错，此时用小驼峰命名法写这个backgroundColor照样能够修改样式

通过类名className修改样式

缺点就是新的类名会替换掉原来的类名，所以这个方法不常用

通过 classList 操作类控制CSS

操作表单元素属性

获取表单里面的值用.value 而不是.innerHTML 但<button></button>是用innerHTML获取值的

修改input的type属性  

表单常见属性：disable是禁用的意思，默认是false即不禁用，可以用在验证码已经发送要等60秒才能继续点击，此时就禁用发送验证码的按钮。

checked是选中，默认为true

H5自定义属性

给一些标签自定义一些属性，一定要一data-开头

获取自定义属性：先获得标签对象，如何.dataset获得一个自定义属性Map对象(集合包含了所有自定属性) 再.具体的属性名

set获得的map对象

定时器-间歇函数

就是每隔一定的时间执行一次函数：应用在倒计时

setInterval里面的函数有俩种写法：可以是匿名函数也可以直接写已定义的函数名

关闭定时器

间歇函数返回的是一个数字，即id，每个间歇函数都有自己的id。我们用let来接收这个id，因为关闭了定时器再打开会给id赋值，不适用const。

倒计数效果案例

轮播图定时版

设置小圆点轮播时，用到了排他思想，先把其他li的active去掉，再给当前li加active

事件监听

就是给事件源添加事件 关键要分清三要素

俩种写法 btn.onclick下一个会覆盖上一个

addEventListener()不会覆盖，而且执行完11再执行22

鼠标事件

事件对象

        ​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。

                        

事件对象就是存储了如点击事件等发生时的一些相关信息，它放在了function（e）的第一个参数，不一定写e任意都可以，反之第一个就是事件对象。

使用场景

事件对象的常用属性

环境对象this

this就是当前函数的调用者

回调函数

把函数当做另外一个函数的参数传递，这个函数就叫回调函数 

回调函数本质还是函数，只不过把它当成参数使用

使用匿名函数做为回调函数比较常用

setInterval和addEventListener里面的function就是回调函数

随机点名案例

轮播图完整版案例

让图片自动轮播可以用next.click()即用js自动执行click事件，不要再写轮播的代码

这段写的是图片自动轮播，鼠标经过停止轮播，鼠标离开继续轮播

回车发布评论案例

用到了trim()函数就是去除左右俩边的空格，字符中间的不能去掉

用到了事件对象 只有按下了enter键才能发挥

tab栏切换

a.active 是对class=active的a标签生效，

a：active 是对按下的a标签生效

 

表单全选反选案例

伪类选择器.ck:checked 就是把checked的ck全部选中修改样式

事件流、事件捕获、事件冒泡

事件流：

事件捕获：

事件冒泡：

总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。

如果它的父级元素也有某个事件函数，当执行完它的事件函数后，也就会执行它父级的事件函数。

点击son的div盒子执行事件冒泡，alet我是儿子、再alet我是爸爸最后alet我是爷爷

即使儿子没有点击事件的处理函数，他也会向上冒泡

阻止冒泡

解绑事件

on事件解绑方式

addEventListener解绑方式

总结

鼠标经过事件的区别

基本都是用mouseenter和mouseleave

事件委托

应用，之前给每个小li要绑定事件都是用的for循环。现在可以用事件委托，给ul绑定事件，点击li时点击事件会自动冒泡到ul，再执行ul的事件处理函数

总结

e.target获得的是对象 而e.target.tagName获得是对象的名字并且是大写的

事件委托版tab栏切换案例

data-id是属性不要写成类名了

对象调用dataset

阻止元素默认行为

如阻止表单提交、组织链接跳转

页面加载事件（两种方法）

页面资源加载完才执行里面的函数

load和DOMContentLoaded

页面滚动事件

两个属性scrollTop、scrollLeft

获取整个页面的HTML标签

页面滚动到指定坐标（了解）

总结

页面尺寸事件

元素位置属性

clientWidth和clientHeight（不包含border）

offsetWidth、offsetHeight(它是包括border)和offsetTop和offsetLeft

返回元素相对于可视区域的大小及位置（返回的是一个对象）

总结

电梯导航案例(小兔鲜) 

挺重要的

让滑动变得光滑

属性选择器