—— 此篇开始 ——
什么是DOM
DOM全称Document Object Model，即文档对象模型，其就是一整套操作文档流的属性和方法，本质就是在操作页面元素，如操作页面元素改变文本内容、操作页面元素改变样式、操作删除一个页面元素、操作增加一个页面元素等
DOM以树状结构出现，顶层为document，最大的标签是html，下面分成head和body，body下面就是一些元素标签，操作DOM就是对这个"树上"的某个树杈进行修剪或者修饰
操作DOM的过程
1. 找到你要操作的"树杈"：获取元素
2. 对这个枝杈进行各种操作：操作 API
获取元素
1. id直接使用
给一个元素标签设置一个id属性，id名是一个天生的变量，可以在js内直接使用，表示的就是这个标签元素，强烈不推荐
2. 获取非常规标签(html,body,head)
1.html：语法：document.documentElement，得到的就是该页面的html标签
2.head：语法：document.head，得到的就是该页面的head标签
3.body：语法：document.body，得到的就是该页面的body标签
代码：
<!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>Document</title>
</head>
<body>
<script>
//获取html
var html = document.documentElement
console.log (html);
//获取head
var head = document.head
console.log (head);
//获取body
var body = document.body
console.log (body);
</script>
</body>
</html>结果：
3. 获取常规标签(所有标签)
1. 根据id获取元素
语法：document.getElementById("id名称")
返回值：如果页面中有id对应的元素，那么就是这个元素，如果没有这个元素，那么就是null
代码：
<!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>Document</title>
</head>
<body>
<div id="box">你好世界</div>
<script>
var box = document.getElementById('box') //根据id获取元素
console.log (box);
</script>
</body>
</html>结果：
2. 根据类名获取元素
语法：document.getElementsByClassName("类名")
返回值：是一个伪数组，如果页面上有类名对应的元素，那么有多少获取多少，放在伪数组内返回，如果页面内没有类名对应的元素，那么就是一个空的伪数组，注意：你拿到的不是这个元素，而是一个集合，集合内的[n]才是元素
代码：
<!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>Document</title>
</head>
<body>
<div class="box">1111</div>
<p class="box">22222</p>
<script>
var boxs = document.getElementsByClassName('box') //根据类名获取元素
console.log (boxs);
console.log (boxs[1]);
</script>
</body>
</html>结果：
3. 根据标签名获取元素
语法：document.getElementsByTagName('标签名')
返回值：是一个伪数组，如果页面上有标签名对应的元素，那么有多少获取多少，放到伪数组进行返回，如果页面上没有，那么就是个空的伪数组，注意：你拿到的不是这个元素，而是一个集合，集合内的[n]才是元素
代码：
<!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>Document</title>
</head>
<body>
<ul>
<li>1</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul') //根据标签名获取元素
console.log (ul);
</script>
</body>
</html>结果：
4. 根据name属性来获取元素
语法：document.getElementsByName('name属性')
返回值：是一个伪数组，如果页面上有name属性，那么有多少获取多少，放在伪数组内进行返回，如果页面上没有，那么就是个空的伪数组，注意：你拿到的不是这个元素，而是一个集合，集合内的[n]才是元素
代码：
<!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>Document</title>
</head>
<body>
<input type="text" name="username" id="">
<div name="username">111</div>
<script>
var usernames= document.getElementsByName('username') //根据name属性来获取元素
console.log (usernames);
</script>
</body>
</html>结果：
5.根据选择器获取一个元素
语法：document.quarySelector('选择器')
选择器：CSS中捕获元素的内容，如.box、#box、div、li:nth-children(1)等
返回值：如果页面上有该选择器对应的元素，那么就是满足条件的第一个，如果页面上没有该选择起对应的元素，那么就是null
代码：
<!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>Document</title>
</head>
<body>
<div id="box">你好世界</div>
<div class="box">1111</div>
<p class="box">22222</p>
<script>
var div = document.querySelector('div') //通过选择器获取第一个div
console.log(div);
var box = document.querySelector('.box') //通过选择器获取第一个类名为box的
console.log(box);
</script>
</body>
</html>结果：
6.根据选择器获取一组元素
语法：document.querySelectorAll('选择器')
返回值：是个伪数组，如果页面上有该选择器对应的元素，那么有多少获取多少，放在伪数组内返回，如果页面上没有该选择器对应的元素，那么就是空的伪数组
代码：
<!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>Document</title>
</head>
<body>
<div id="box">你好世界</div>
<div class="box">1111</div>
<div name="username">111</div>
<script>
var divs = document.querySelectorAll('div') //通过选择器获取所有的div
console.log (divs);
</script>
</body>
</html>结果：
—— 此篇完 ——