1.什么是DOM
DOM:document object model文档对象模型
DOM给我们提供了一套可以操作文档流（也就是可以操作页面元素）的属性和方法。
其实就是可以让我们操作标签，让标签发生一些改变（标签的改变无非就是更改标签的样式、标签的内容、更改标签的类名、更改标签的属性、删除标签、添加标签等）
其实操作dom就2个步骤
1.找到标签
2.对标签进行你想要的操作
2.获取元素
在js中把标签分成了2类。第一类就是常规元素，第二类是非常规元素
非常规元素：html、head、body，剩下的全部都是常规元素
1）获取非常规元素的方式：
获取html：document.documentElement
获取head：document.head
获取body：document.body
2）获取常规元素的方式
1>.根据标签的id名字来获取元素
语法：document.getElementById('id名字')
返回值:能找到就是该标签，找不到就是null
// 根据标签的id名字来获取元素
var res = document.getElementById('d2')
console.log(res);
2>.根据标签的类名来获取元素
语法：document.getElementsByClassName('类名')
返回值：一定是一个伪数组（长得和数组一样，也有索引，但是不能使用数组的常用方法，比如push、pop等不能使用），会找到该页面中所有叫这个类名的标签，把他们放到数组中;如果找不见，就是一个空数组
注意：返回值不是具体的标签，不能直接操作，要想操作的话得根据数组的索引找到具体的标签
//根据标签的类名来获取元素
var res = document.getElementsByClassName('box1')
console.log(res);
console.log(res[0]);
3>.根据标签名字来获取元素
语法： document.getElementsByTagName('标签')
返回值：一定是一个伪数组，把找到的标签全部被放到伪数组中，一个都找不见结果就是空的伪数组
//根据标签名字来获取元素
var res = document.getElementsByTagName('div')
console.log(res);
4>. 可以根据选择器得到一个元素
语法： document.querySelector(’选择器‘)
作用：通过选择器找到符合条件的第一个标签
返回值：能找见就是该标签，找不见就是null
var res = document.querySelector('ul')
console.log(res);
var res = document.querySelector('ul>li')
console.log(res);
var res = document.querySelectorAll('ul>li')
console.log(res);
var res = document.querySelector('ul>li:nth-child(5)')
console.log(res);
5>.可以根据选择器‘得到多个元素
语法： document.querySelectorAll(’选择器‘)
作用：通过选择器找到所有符合条件的标签
返回值：一定是一个伪数组，将符合条件的全部放到伪数组中，如果一个都找不见必然是空数组
注意：用querySelector的时候一定要注意，参数写的是选择器，那么必须要符合css选择器的语法才可以
3.操作元素样式
操作元素的样式：获取该元素的样式、给该元素设置样式
1）如何获取元素的样式？
获取行内样式:
语法：元素.style.样式名
作用：可以得到该元素的样式值
获取非行内样式：
语法：window.getComputedStyle(元素).样式名
注意：
如果名字中带有中划线必须通过驼峰命名法或者数组关联语法去获取
获取色值的时候无论你是通过哪种方式写的色值，最终浏览器都会自动转换成rgb的色值
2）如何设置元素的样式？
注意：只要是通过js设置的样式全部都是行内样式
语法：元素.style.样式名 = 值
如果名字中带有中划线必须通过驼峰命名法或者数组关联语法去设置
//找标签
var divEle = document.querySelector('div')
console.log(divEle);
// 获取到该标签身上的width属性值
var res = divEle.style.width
console.log(res);
//设置元素样式
divEle.style.border = '5px solid red'
4.操作元素的属性
元素的属性：长在标签名字之后的都统称为属性。属性分为2个部分（属性名和属性值）
js中对属性做了分类，分成了原生属性、自定义属性、h5自定义属性
原生属性：原生属性就是w3c标准中存在的属性，比如class、id、src、alt等
自定义属性：就是标准中没有的，我们自己随便写的，自定义属性不会对标签产生任何特殊效果，对标签而言没有什么意义，只是用来记录一些js程序运行中需要的一些信息。
h5自定义属性：因为h5之前我们不好区分哪些是自定义属性哪些是原生属性，所以h5之后就对自定义属性做了一些规定。规定以后写自定义属性最好用data-开头,data-之后的才是我们的属性名字，加这个data-只是为了和原生属性区分。
对原生属性的操作：
读取（得到）原生属性的属性值：
语法：元素.属性名
注意：在获取类名的时候要用className，而不是class
设置原生属性的属性值：
语法：元素.属性名 = 值
<body>
<div class="d1" id="box1">11</div>
<div class="d2">11</div>
</body>
<script>
//获取属性
var d1Ele = document.querySelector('.d1')
// 想得到d1Ele这个标签的class属性值，因为class是原生属性，所以如法如下：
console.log(d1Ele.className);
console.log(d1Ele.id);
</script>
得到自定义属性的值：
语法：元素.getAttribute('属性名')
添加自定义属性：
语法：元素.setAttribute('属性名'，'属性值')
删除自定义属性：
语法：元素.removeAttribute('属性名')
<body>
<div class="d1" hh='哈哈' ll='ll'></div>
</body>
<script>
//得到类名为d1这个标签身上的hh这个属性对应的属性值 因为hh是自定义属性
// 获取元素
var d1Ele = document.querySelector('.d1')
var res = d1Ele.getAttribute('hh')
console.log(res);
var res1 = d1Ele.getAttribute('ll')
console.log(res1);
d1Ele.setAttribute('w','元')
d1Ele.removeAttribute('hh')
</script>h5自定义属性：
每一个元素的身上天生都自带一个dataset属性，它是一个对象数据类型，在它里面存储了所有的h5自定义属性。
既然dataset中存储的都是h5的自定义属性，它刚好是一个对象数据类型，所以我们将来要想添加、删除、获取h5自定义属性，就只需要按照操作对象的方式操作dataset即可
得到h5自定义属性的值：
语法：元素.dataset.属性名
添加h5自定义属性
语法：元素.dataset.属性名 = '值'
删除h5自定义属性
语法：delete 元素.dataset.属性名
//获得自定义元素属性
var divEle = document.querySelector('div')
//添加自定义属性
divEle.dataset.der = '呼啦啦'
//删除自定义属性
delete divEle.dataset.hh
5. 操作元素的类名
目的：是为了批量更改样式方便，标签如果改的样式太多了，最好把样式用css书写，用js加上这个样式的类名即可。
得到类名的语法：元素.className
设置类名的语法：元素.className = '值'
注意：设置的时候类名是完全覆盖式的，新的值会把之前的类名全部覆盖掉，所以就需要利用加号做一个拼接操作
因为以上的操作想单独对某一个类名做操作太费劲了，所以看新方案。
新的方案：
在每一个元素的身上天生都有一个classList属性，这是一个伪数组，里面存储了该标签身上所有的类名，所以我们要想去添加类名、获取类名、删除类名只需要操作这个伪数组即可
得到某一个类名：元素.classList[索引]
追加一个类名：元素.classList.add('类名')
删除一个类名：元素.classList.remove('类名')
切换类名：元素.classList.toggle('类名')====原先有就删除，原先没有就添加
<style>
.box{
width: 100px;
height: 100px;
background-color: aqua;
}
.box1{
width: 200px;
height: 300px;
background-color: red;
}
</style>
<body>
<div class="box"></div>
<button id="btn1">点我</button>
</body>
<script>
divele=document.querySelector('div')
btn=document.querySelector('button')
//点击按钮之后，对box1这个类名进行添加
btn.onclick=function(){
divele.classList.toggle('box1')
}
</script>6. 操作元素的内容
1）innerHTML
得到标签的内容：元素.innnerHTML=====会得到该元素下所有的内容，包括标签
在元素下写入内容：元素.innerHTML = '你要写的内容',可以解析标签，能识别标签
注意：会把原内容覆盖掉,如果原内容想保留，就用加号做字符串拼接即可
2）innerText
得到标签的内容：元素.innnerText===会得到该元素下所有的‘文本’内容，不包括标签
在元素下写入内容：元素.innerText = '你要写的内容',无法解析标签，会把标签当作纯文本显示出来
3) value====专门用来操作表单元素的value值的
得到value值的语法：表单元素.value
设置value值的语法：表单元素.value = '值'