DOM获取元素、修改元素

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>

<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 =
```