DOM
- 开发网页内容特效和实现用户交互
DOM树
- 直观的体现了标签与标签之间的关系
DOM对象
-
浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
- DOM的核心就是把内容当对象来处理
-
获取DOM对象
document.querySelector('CSS选择器')
-
参数
- 包含一个有效的CSS选择器 字符串
-
返回值
- CSS选择器匹配的第一个元素,一个 HTMLElement对象
- 如果没有匹配到，则返回null
document.querySelectorAll('span')
-
参数
- 包含多个有效的CSS选择器 字符串
-
返回值
- CSS选择器匹配的NodeList 对象集合，一个有长度有索引号的伪数组，没有 pop() push() 等数组方法
- 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
- 获取到的元素不能直接修改，只能通过遍历的方式。依次给里面的元素做修改
-
其他方法
设置/修改DOM元素内容
-
document.write()
- 只能将文本内容追加到 前面的位置
- 文本中包含的标签会被解析
-
元素 . innerText 属性
span.innerText = name
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
-
元素 . innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
-
设置/修改元素常用属性
-
对象.属性=值
-
//获取图片
let img = document.querySelector('img')
// 设置路径
let path = `./images/${random}.jpg`
// 赋值
img.src = path
设置/修改元素样式属性
-
通过 style 属性操作CSS
-
对象.style.样式属性=值
- 修改样式通过style属性引出
- 如果属性有-连接符，需要转换为小驼峰命名法
- 赋值的时候加css单位
-
-
操作类名(className) 操作CSS
-
元素.className='active‘
- 由于class是关键字, 所以使用className去代替
- 可以同时修改多个样式
- 直接使用 className 赋值会覆盖以前的类名
-
-
通过 classList 操作类控制CSS
// 绑定单击事件
btn1.addEventListener('click', function () {
// 操作类名，添加类名
p.classList.add('size50', 'underline')
})
btn2.addEventListener('click', function () {
// 操作类名，移除类名
p.classList.remove('size50')
})
btn3.addEventListener('click', function () {
// 操作类名，切换类名
p.classList.toggle('underline')
})
btn4.addEventListener('click', function () {
// 操作类名，移除类名
let Class = p.classList.contains('blue')
console.log(Class);
})
- classList 是追加和删除不影响以前类名
设置/修改 表单元素 属性
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
- 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是 false 代表移除了该属性
- disabled、checked、selected
// 获取全选框
let chkAll = document.querySelector('.chkAll')
// 获取列表结构的复选框
let chks = document.querySelectorAll('.list input')
// 绑定单击事件
chkAll.addEventListener('click', function () {
// 设置当前全选复选框状态,表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
let state = chkAll.checked
// 遍历列表结构的复选框的状态
for (let i = 0; i < chks.length; i++) {
chks[i].checked = state
}
})
定时器（间歇函数）
- 开启定时器
setInterval(函数，间隔时间)
- 作用：每隔一段时间调用这个函数
- 间隔时间单位是毫秒
let Id = setInterval(function () {
timeCount--
// 单标签用value
btn.value = `倒计时${timeCount}s`
// disable:禁用
btn.disabled = true
}
}, 1000)
关闭定时器
clearInterval(变量名)
// 结束定时器
if (timeCount == -1) {
clearInterval(Id)
btn.disabled = false
btn.value = `倒计时5s`
