获取DOM元素、修改属性
目标： 能获取DOM元素并修改元素属性，具备利用定时器制作焦点图切换的能力
webApi的基本认知
-
作用: 就是使用JS去操作html和浏览器
-
分类
-
DOM
- 操作html和css
-
BOM
- 操作浏览器
-
-
DOM 树
- HTML DOM 定义了访问和操作 HTML 文档的标准方法
- DOM 以树结构表达 HTML 文档
-
DOM对象(重要)
-
浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
获取DOM对象的方式
-
document.querySelector
- 获取的是满足条件的第一个 一定只有一个
- 获取的是dom元素，可以直接操作
-
document.querySelectorAll
- 获取的是满足条件的所有DOM对象 返回的是一个集合
- 获取的是伪数组，无法直接操作,必须通过下标才能操作，所以我们对伪数组进行遍历
-
其他了解的
- document.getElementById()
- document.getElementsByTagName()
设置/修改元素内容
-
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.
- 就是操作对象使用的点语法
-
为标签设置标签之间的内容
-
innerText
- 只关注内容, 不关注标签
-
innerHTML
- 可以解析标签
-
使用: 不明确数据的安全性的情况下, 使用innerText
设置/修改元素属性
-
设置/修改常用（内置）属性
- href、title、src
-
案例： 随机点名案例-名字渲染到页面已经有的标签里面
-
设置/修改元素样式属性
-
style操作css
-
每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
-
如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）
-
style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
-
案例： 随机背景案例
- 点击我切换页面背景图片
-
-
操作类名(className)
- 由于class是关键字, 所以使用className去代替
- className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
-
classList
- 添加：add(class1, class2, ...)
- 删除：remove(class1, class2, ...)
- 切换：toggle(class)
- 是否包含：contains(class),包含返回true,不包含返回false
-
对比className和style、classList的区别
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList 是追加和删除不影响以前类名
-
-
设置/修改表单属性
-
正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
-
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
-
常见表单属性
- value、disabled、checked、selected
-
全选案例
-
//获取元素 let checkAll = document.querySelector('#checkAll') let all = document.querySelector('.all') let cks = document.querySelectorAll('.ck') // 给全选复选框绑定单击事件 checkAll.addEventListener('click', function() { //获取全选复选框的状态值 let state = checkAll.checked // for (let i = 0; i < cks.length; i++) { // //为全选复选框下面的复选框赋值全选复选框的状态值 // cks[i].checked = state // } cks.forEach(function(element, index) { element.checked = state }) all.innerText = state ? '取消' : '全选' }) //遍历伪数组中的获取全选复选框下面的每个复选框 for (let i = 0; i < cks.length; i++) { // 为每个复选框绑定单击事件 cks[i].addEventListener('click', function() { //设置全选复选框的默认状态为true let state = true //遍历伪数组中的获取全选复选框下面的每个复选框的目的获取复选框的状态 for (let j = 0; j < cks.length; j++) { // 判断每个复选框的状态 if (cks[j].checked === false) { // 如果复选框的状态为false，全选复选框的默认值也为false state = false }
} checkAll.checked = state all.innerText = state ? '取消' : '全选'}) }
-
-
定时器-间歇函数
-
间隔一段时间之后重新执行对应的代码
-
let timerId = setInterval(回调函数, 间隔时间)
-
清除定时器
- clearInterval(timerId)
-
注意点
- 定时器也是需要等待, 所以后面的代码先执行
- 每一次调用定时器,都会产生一个新的定时器
-
案例： 用户倒计时按钮可用
-
let btn = document.querySelector('button') let tiemContent = 6 btn.addEventListener('click', function() { btn.disables = true //点击按钮开启定时器 ()=>{}是一个匿名行数的缩写 //想要关闭定时器,创建一个新变量作为定时器的句柄(id),然后再把变量放到clearInterval()函数里边 let intervalId = setInterval(() => {
tiemContent-- btn.innerText = `倒计时${tiemContent}s`//判断tiemContent是否等于 0,等于0就关闭定时器 if (tiemContent === 0) { //清除定时器 clearInterval(intervalId) btn.disabled = false } }, 1000); })
-
