一、通过id获取元素（一次一个元素）
一个id在一个页面是唯一的，所以我们可以使用
document.getElementById("id名")
获取元素，使用变量来接收，直接就能获取到这个元素，通过 id 名去获取元素，一次只能获取一个元素。
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<script>
var box = document.getElementById('box')
console.log(box)
</script>
</body>
</html>
直接能获取到这个元素。
二、通过标签名元素（一次多个元素）
通过标签名获取：
document.getElementsByTagName("标签名");
例子：
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing = document.getElementsByTagName('div')
console.log(Liuqing, 'Liuqing')
console.log(Liuqing[0], 'Liuqing[0]')
</script>
</body>
</html>
通过
var Liuqing = document.getElementsByTagName('div')
获取所有div标签元素，得到的是一个HTMLCollection数组，元素集合，然后去集合的第0项，也就是id名为box的元素。
三、通过类名元素（一次多个元素）
通过类名获取：
document.getElementsByClassName("类名");
例子：
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing = document.getElementsByClassName('Liuqing')
console.log(Liuqing, 'Liuqing')
console.log(Liuqing[0], 'Liuqing[0]')
</script>
</body>
</html>
通过
var Liuqing = document.getElementsByClassName('Liuqing')
获取所有class名称为Liuqing的标签元素，得到的是一个HTMLCollection数组，元素集合，然后去集合的第0项，也就是第一个calss名称为Liuqing的元素。
四、querySelector(获取第一个匹配成功的元素)
用法：
document.querySelector('类名（需要加.）|| id（需要加 #）||标签名')
注意：
获取第一个匹配成功的元素
例子：
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box">LiuQing</div>
<div class="Liuqing">Liuqing1</div>
<div class="Liuqing Liuqing2">Liuqing2</div>
<script>
var box = document.getElementById('box')
console.log(box)
var Liuqing1 = document.querySelector('.Liuqing')
console.log(Liuqing1, 'Liuqing1')
var Liuqing2 = document.querySelector('.Liuqing2')
console.log(Liuqing2, 'Liuqing2')
</script>
</body>
</html>
五、querySelectorAll(获取所有匹配成功的元素)
用法：
document.querySelector('类名（需要加.）|| id（需要加 #）||标签名')
注意：
获取所有匹配成功的元素
例子：
<!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>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="Liuqing">
<span class="smallSpan">
span内容
</span>
</div>
<div class="Liuqing">
<span class="smallSpan">
span内容
</span>
</div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing .smallSpan')
console.log(Liuqing, 'Liuqing')
</script>
</body>
</html>
document.querySelectorAll中可以写选择样式，css中怎么写，这里就可以怎么写。
