1、DOM树是什么
将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
作用:
文档树直观的体现了标签与标签之间的关系
![](https://i-blog.csdnimg.cn/blog_migrate/a51e91e1befef219bdf7e59e3cfba617.png)
2、获取DOM对象
1.1 选择匹配的第一个元素
![](https://i-blog.csdnimg.cn/blog_migrate/332cf134fc146d62fb9bfb66de2c2294.png)
1.2 选择匹配的多个元素
![](https://i-blog.csdnimg.cn/blog_migrate/814fcbbd36efb56ebc75a8adb25cbe36.png)
得到的是一个伪数组:
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
- 想要得到里面的每一个对象,则需要遍历(for)的方式获得
1. 获取一个DOM元素我们使用谁?
- querySelector()
2. 获取多个DOM元素我们使用谁?
- querySelectorAll()
3. querySelector() 方法能直接操作修改吗?
- 可以
4. querySelectorAll() 方法能直接修改吗? 如果不能可以怎么做到修改?
- 不可以, 只能通过遍历的方式一次给里面的元素做修改
2.
其他获取DOM元素方法(了解)
![](https://i-blog.csdnimg.cn/blog_migrate/ab25820b531115457d2dfc30b315d1c0.png)
3. 他们两者小括号里面的参数有神马注意事项?
- 里面写css选择器
- 必须是字符串,也就是必须加引号
3、设置/修改DOM元素内容
document.write()
- 只能将文本内容追加到 </body> 前面的位置
- 文本中包含的标签会被解析
元素innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
元素.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
4、设置/修改DOM元素属性
还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href、title、src 等
![](https://i-blog.csdnimg.cn/blog_migrate/522ba74eac63649e43151c8389d071a9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1432375789dd89c4888327d59aba2b13.png)
1. 设置/修改元素样式属性通过 style 属性引出来?
2. 如果需要修改一个div盒子的样式,比如 padding-left, 如何写?
element.style.paddingLeft = ‘300px’
小驼峰命名法
3. 因为我们是样式属性,一定别忘记,大部分数字后面都需要加单位
![](https://i-blog.csdnimg.cn/blog_migrate/0132cd908b77d036883983f17d8bc7cf.png)
2. 设置/修改元素
样式
属性
![](https://i-blog.csdnimg.cn/blog_migrate/a48607e12b95b2c72ce088f499c92921.png)
1.
使用 className 有什么好处?
- 可以同时修改多个样式
2. 使用 className 有什么注意事项?
- 直接使用 className 赋值会覆盖以前的类名
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
![](https://i-blog.csdnimg.cn/blog_migrate/ec118b8ee9d36f2f4dab6b56ecf69f5f.png)
1.
使用 className 和classList的区别?
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList 是追加和删除不影响以前类
5、定时器-间歇函数(setinterval)
1. 开启定时器
![](https://i-blog.csdnimg.cn/blog_migrate/a3eba1f4e1419137ea43054d2c05779f.png)
- 作用:每隔一段时间调用这个函数
- 间隔时间单位是毫秒
![](https://i-blog.csdnimg.cn/blog_migrate/1294bf7edd769be030062fa4ffc85a97.png)
2. 关闭定时器
![](https://i-blog.csdnimg.cn/blog_migrate/27e1b8e3d8a500647a71cd22c2f00498.png)
6、 事件监听
什么是事件?
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击一个按钮
什么是事件监听?
- 让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件
![](https://i-blog.csdnimg.cn/blog_migrate/e0c65a461ef11c4842f368c692ddc456.png)
事件监听三要素:
- 事件源: 那个dom元素被事件触发了,要获取dom元素
- 事件: 用什么方式触发,比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数: 要做什么事
![](https://i-blog.csdnimg.cn/blog_migrate/ccca577c521a4c9de5592d53ebc4eb38.png)
1. 什么是事件?
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如点击按钮 click
2. 什么是事件监听?
- 就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件
3. 事件监听三要素是什么?
- 事件源 (谁被触发了)
- 事件 (用什么方式触发,点击还是鼠标经过等)
- 事件处理程序 (要做什么事情)
淘宝点击关闭二维码
需求:点击关闭之后,淘宝二维码关闭
案例
分析:
①:点击的是关闭按钮
②:关闭的是父盒子
核心:利用样式的显示和隐藏完成,
display:none 隐藏元素
display:block 显示元素
3. 事件类型
1. 高阶函数
- 高阶函数可以被简单理解为函数的高级应用,JavaScript 中函数可以被当成【值】来对待,基于这个特性实现函数的高级应用。
- 【值】就是 JavaScript 中的数据,如数值、字符串、布尔、对象等。
- 如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数
- 简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
1.
函数表达式
- 函数也是【数据】
- 把函数赋值给变量
2.
回调函数
- 把函数当做另外一个函数的参数传递,这个函数就叫回调函数
- 回调函数本质还是函数,只不过把它当成参数使用
- 使用匿名函数做为回调函数比较常见
3. 环境对象
- 环境对象指的是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境
- 作用:弄清楚this的指向,可以让我们代码更简洁
- 函数的调用方式不同,this 指代的对象也不同
- 【谁调用, this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数,其实相当于是 window.函数,所以 this 指代 window
4. 编程思想
排他思想
当前元素为A状态,其他元素为B状态
使用:
1. 干掉所有人
使用for循环
2. 复活他自己
通过this或者下标找到自己或者对应的元素