DOM获取元素、修改元素
1.DOM
①什么是DOM?作用?
DOM是文档对象模型
作用:操作网页内容,可以开发网页内容特效和实现用户交互。
②DOM对象
2.获取DOM元素
① 根据CSS选择器来获取DOM元素 (重点)
思考
获取一个DOM元素我们使用谁?
querySelector()
获取多个DOM元素我们使用谁?
querySelectorAll()
querySelector() 方法能直接操作修改吗?
可以
querySelectorAll() 方法能直接修改吗? 如果不能可以怎么做到修改?
不可以, 只能通过遍历的方式一次给里面的元素做修改
②其他获取DOM元素方法(了解)
注意点
3.设置/修改DOM元素内容
①.document.write()
②.元素innerText 属性
③.元素.innerHTML 属性
三者区别
1.document.write() 方法 :只能追加到body中
2.元素.innerText 属性 :只识别内容,不能解析标签
3.元素.innerHTML 属性: 能够解析标签
如果还在纠结到底用谁,你可以选择innerHTML
案例:随机抽取的名字显示到指定的标签内部
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
div {
display: inline-block;
height: 30px;
width: 150px;
vertical-align: middle;
border: 1px solid pink;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
点到的同学为:<div></div>
```
<script>
let div = document.querySelector('div')
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min +1))
+ min
}
let arr = ['赵云', '马超', '黄忠', '刘备', '张飞', '关羽', '曹操']
let random = getRandom(0, arr.length - 1)
div.innerHTML = arr[random]
arr.splice(random, 1)
</script>
```
</body>
</html>
4.设置/修改DOM元素属性
①.设置/修改元素常用属性
②.设置/修改元素样式属性
1)通过 style 属性操作CSS
2)操作类名(className) 操作CSS
注意点
直接使用 className 赋值会覆盖以前的类名
3)通过 classList 操作类控制CSS
③.设置/修改 表单元素 属性
5.定时器-间歇函数
案例:倒计时效果
需求:按钮6秒之后才可以使用
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时间歇函数</title>
</head>
<body>
<button class="btn" disabled>我已经阅读用户协议(6)</button>
<script>
let btn = document.querySelector('.btn')
```js
let i =
```