DOM：document object model文档对象模型
他给我们提供了一套可以操作文档流（即操作页面元素）的属性和方法。其实就是可以让我们操作标签，让标签发生一些改变（更改标签的样式、内容、类名、属性、增、删标签等）
其实操作dom就2个步骤：
1.找到标签 【获取元素】
2.对标签进行你想要的操作【操作元素】
获取元素：在 js中把标签分成了2类。第一类就是常规元素，第二类是非常规元素非常规元素: html、head、 body，剩下的全部都是常规元素
(1)获取非常规元素的方式
获取html: document.documentElement
获取head: document.head
获取body: document. body(2)获取常规元素的方式
1.根据标签的id名字来获取元素: document.getElementById( "id名字")
返回值:能找到就是该标签，找不到就是null
2.根据标签的类名来获取元素: document.getElementsByclassName('类名')
返回值:一定是一个'伪数组'(长得和数组一样，也有索引，但是不能使用数组的常用方法，比如push、pop等不能使用)，
会找到该页面中所有叫这个类名的标签，把他们放到数组中，如果找不见，就是一个空数组
//思考:返回值是具体的标签吗?能直接操作吗?(不是具体的标签，不能直接操作)
//要想操作怎么办?根据数组的索引找到具体的标签
3.根据标签名字来获取元素 document.getElementsByTagName( '标签')
返回值:一定是一个'伪数组'，把找到的标签全部被放到伪数组中，一个都找不见结果就是空的伪数组
4.可以根据'选择器'得到一个元素:document.queryselector('选择器')
作用:通过选择器找到符合条件的'第一个'标签
返回值:能找见就是该标签，找不见就是null
5.可以根据'选择器'得到多个元素:document.queryselectorA11('选择器')
作用:通过选择器找到'所有'符合条件的标签
返回值:一定是一个'伪数组'，将符合条件的全部放到伪数组中，如果一个都找不见必然是空数组
操作元素的样式：获取该元素的样式、给该元素设置样式
如何获取元素的样式?
//---------------------获取行内样式
语法: 元素.style.样式名
作用:可以得到该元素的样式值获取非行内样式
注意:如果名字中带有中划线必须通过驼峰命名法或者数组关联语法去获取
<body>
<div style="width: 300px;font-size: 30px;">文字</div>
</body>
<script>
var divEle= document.queryselector('div') //获取元素（body里面的div标签）
var res1 = divEle.style.fontSize // 驼峰命名法 获取元素样式（font-size的值）
var res2 = divEle.style["font-size"] // 数组关联语法
</script>//---------------------获取非行内样式
语法: window.getComputedstyle(元素).样式名
注意 ：如果名字中带有中划线必须通过驼峰命名法 or 数组关联语法去获取
获取色值的时候无论你是通过哪种方式写的色值，最终浏览器都会自动转换成rgb的色值
<style>
div{
height: 400px;
}
</style>
<body>
<div>文字</div>
</body>
<script>
var divEle= document.queryselector('div') //获取元素（body里面的div标签）
var res = window.getComputedStyle(divEle).height//获取到非行内样式divEle的高度
var res = window.getComputedStyle(divEle).backgroundColor//获取到外部样式里divEle的背景色
</script>如何设置元素的样式？
语法：元素.style.样式名 = 值
记住：只要是通过 js 设置的样式全部都是行内样式
注意：如果名字中带有中划线必须通过驼峰命名法 or 数组关联语法去设置
divEle.style.border = "5px solid red"
divEle.style.fontFamily = '楷体'
divEle.style.backgroundcolor = 'red'//行内样式优先级最高*/
操作元素的属性：
元素的属性：长在标签名字之后的都统称为属性。属性分为2个部分（属性名&属性值），js中对属性做了分类，分成了 原生属性、自定义属性、h5自定义属性 下面详细讲这三种属性的操作。
原生属性：就是w3c标准中存在的属性，比如class、id、src、alt等
对原生属性的操作：
读取（得到）原生属性的属性值：
语法：元素.属性名
注意：在获取类名的时候要用className，而不是class
<body>
<div class="d1" id="box1"></div>
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取body中的d1标签
console.log(d1Ele.className); // 读取d1Ele这个标签的class类名
console.log(d1Ele.id); // 读取d1Ele这个标签的id名
</script> 设置 原生属性的属性值：
语法：元素.属性名 = 值
<body>
<div class="d1"></div>
<img src="gimg1.jpg" alt="这是图片">
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取body中的d1标签
var imgEle = document.querySelector('img') // 获取body中的img标签
d1Ele.className = 'dd1' // 给d1Ele这个元素重新设置类名
imgEle.src="gimg2.jpg" // 给imgEle这个元素的src属性重新赋值
imgEle.alt='这是一个荷花' // 给imgEle这个元素的alt属性重新赋值
</script>自定义属性：就是标准中没有的，我们自己随便写的，自定义属性不会对标签产生任何特殊效果，对标签而言没有什么意义，只是用来记录一些js程序运行中需要的一些信息。
对自定义属性的操作：
得到自定义属性的值：
语法：元素.getAttribute('属性名')
添加自定义属性：
语法：元素.setAttribute('属性名'，'属性值')
删除自定义属性：
语法：元素.removeAttribute('属性名')
<body>
<div class="d1" hh='哈哈' ll='ll'></div>
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取元素(标签)
var res = d1Ele.getAttribute('hh') //得到自定义属性'hh'
var res1 = d1Ele.getAttribute('ll') //得到自定义属性'll'
d1Ele.setAttribute('wy','王元') //增加自定义属性'wy'，其属性值为'王元'
d1Ele.removeAttribute('hh') //删除自定义属性'hh'
</script>h5自定义属性：因为h5之前我们不好区分哪些是自定义属性哪些是原生属性，所以h5之后就对自定义属性做了一些规定。规定以后写自定义属性最好用data-开头,data-之后的才是我们的属性名字，加这个data-只是为了和原生属性区分。
对h5自定义属性的操作：
每一个元素的身上天生都自带一个dataset属性，他是一个对象数据类型，在他里面存储了所有的h5自定义属性。既然dataset中存储的都是h5的自定义属性，他刚好是一个对象数据类型，所以我们将来要想添加、删除、获取h5自定义属性，就只需要按照操作对象的方式操作dataset即可
得到h5自定义属性的值：
语法：元素.dataset.属性名
添加h5自定义属性
语法：元素.dataset.属性名 = '值'
删除h5自定义属性
语法：delete 元素.dataset.属性名
<body>
<div class="d1" ll="xx" data-hh="哈哈" data-wy="王元"></div>
</body>
<script>
var divEle = document.querySelector('div') //获取body中的div元素
console.log(divEle.dataset.wy); // 获取div中h5自定义属性wy的值
console.log(divEle.dataset); // 获取div中所有的h5自定义属性
divEle.dataset.zs = '张三' // 给div中增加一个h5自定义属性，属性名'zs'，属性值'张三'
delete divEle.dataset.hh // 删除div中名为'hh'的 h5自定义属性
</script>
操作元素的类名：
操作类名的目的是啥？是为了批量更改样式方便，标签如果改的样式太多了，最好把样式用css书写，用js加上这个样式的类名即可。
得到类名的语法：元素.className
得到的也是一个完整的类名，如果类名太多，只想得到其中一个，还要去自己写逻辑，太麻烦了
设置类名的语法：元素.className = '值'
注意：设置的时候类名是完全覆盖式的，新的值会把之前的类名全部覆盖掉，所以就需要利用加号做一个拼接操作
因为以上的操作想单独对某一个类名做操作太费劲了，所以看新方案。
新的方案：
在每一个元素的身上天生都有一个classList属性，这是一个伪数组，里面存储了该标签身上所有的类名
所以我们要想去添加类名、获取类名、删除类名只需要操作这个伪数组即可
得到某一个类名：元素.classList[索引]
追加一个类名：元素.classList.add('类名')
删除一个类名：元素.classList.remove('类名')
切换类名：元素.classList.toggle('类名')====原先有就删除，原先没有就添加案例：当点击button按钮的时把div标签的宽度设为400，背景色设为红色，文字加大,居中
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-family: '楷体';
}
.box2 {
width: 400px;
height: 400px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
line-height: 400px;
}
</style>
<body>
<button>点我</button>
<div class="box a b c">div标签</div>
</body>
<script>
// 1.获取标签
var divEle = document.querySelector('div')
var btn = document.querySelector('button')
// 2.给按钮添加点击事件
/*
btn.onclick = function () {
// 3.修改div的样式
divEle.style.width = '400px'
divEle.style.backgroundColor = 'red'
divEle.style.fontSize = '50px'
divEle.style.textAlign='center'
divEle.style.lineHeight = '400px'
}
--------------------显然，上述用js一个个去操作属性的样式太麻烦了 */
//换种方法：给标签再添加一个box2的类名，在js中给此类名添加更改后的css样式，用js操作该类名：
//divEle.className = 'box2'// 这样写会直接覆盖掉类名box
//若不想覆盖类名 想追加再原类名的后面：**拼接的时候前面要加空格**
divEle.className = divEle.className + ' box2'
//---------------------------------------------------------
//console.log(divEle.classList[2]); // 打印div中的第二个类名
// divEle.classList.add('d') // 给div中添加一个类名'd'
// divEle.classList.remove('box') // 删除div中的box类名
// // 需求：点击按钮的时候：
// // 如果之前有box2这个类名就添加，如果之前没有就删除 ===== 切换
// btn.onclick = function () {
// divEle.classList.toggle('box2')
// }
</script>操作元素的内容 ：
1）innerHTML
得到标签的内容：元素.innnerHTML=====会得到该元素下所有的内容，包括标签
在元素下写入内容：元素.innerHTML = '你要写的内容',可以解析标签，能识别标签
注意：会把原内容覆盖掉,如果原内容想保留，就用加号做字符串拼接即可
2）innerText
得到标签的内容：元素.innnerText===会得到该元素下所有的‘文本’内容，不包括标签
在元素下写入内容：元素.innerText = '你要写的内容',无法解析标签，会把标签当作纯文本显示
3) value====专门用来操作表单元素的value值的
获取value值的语法：表单元素.value
设置value值的语法：表单元素.value = '值
获取元素尺寸（获取元素的占地面积，也就是获取元素总宽）
offset写法:
获取宽度：元素.offsetWidth // 得到的是元素的总宽度
标准盒子：width+左右的padding+左右的border
怪异盒子：width
获取高度：元素.offsetHeight // 得到的是元素的总高度
client写法:(这种写法是不包括边框线的:内容+padding值)
获取宽度：元素.clientWidth
获取高度：元素.clientHeight
获取元素的偏移值
偏移值：就是距离参照物的距离
offset语法
1.元素.offsetParent=======得到该元素的有定位的父级元素
2.元素.offsetLeft====得到该元素相对于参照物左边的距离
3.元素.offsetTop====得到该元素相对于参照物上边的距离
client语法(了解即可，很少使用)
元素.clientLef======得到的是该元素内容区+内间距与该元素边框线坐上角的间距(得到左边框的粗细)
元素.clientTop===得到上边框显得粗细
说白了他们2个就是得到边框线的粗细
获取可视窗口的尺寸
BOM方式 (是包含滚动条)
window.innerWidth
window.innerHeight
DOM方式（不包含滚动条的）
document.documentElement.clientWidth
document.documentElement.clientHeight
DOM节点操作
获取节点的方式
1）获取元素节点的方式：（说白了就是获取元素，获取标签）===以下的几个方式只能获取到元素节点
document.getElementById('id名字')
document.getElementsByClassName('类名')
document.getElementsByTagName('标签名')
document.querySelector('选择器')
document.querySelectorALL('选择器')
2)获取节点的方式（可以获取到元素节点、也可以获取到非元素节点）
1.元素.childNodes //返回值：一个伪数组，可以获取到该元素下所有的子一级节点
2.元素.children //返回值：伪数组，可以获取到该元素下所有的子一级元素节点
3.元素.firstChild
元素.lastChild //得到该元素下第一个子节点或者最后一个子节点
4.元素.firstElementChild
元素.lastElementChild //得到该元素下第一个或者最后一个元素节点
5.元素.previousSibling //得到该元素的上一个兄弟节点
6.元素.previousElementSibling //得到该元素的上一个兄弟元素节点
7.元素.nextSibling //得到该元素下一个兄弟节点
8.元素.nextElementSibling //得到该元素下一个兄弟元素节点
9.元素.parentNode //找父节点，html往上还有一个最大的document节点
10.元素.parentElement //找父元素节点，HTML往上就没有元素了，结果就是null
11.元素.attributes //可以得到该元素身上所有的属性节点创建节点
创建元素节点(即创造一个标签):document.createElement('标签名')
创建文本节点:document.createTextNode('文本内容')
注意:通过js创造的节点不会显示在页面中，要想显示，必须得插入进去。插入节点
语法1：父元素.appendChild('子节点')====把子节点放到父元素中，排到最后
语法2：父元素.insertBefore(要插入的子节点，插入到谁的前面)===插入到父元素下指定元素的前面删除节点
语法1：父元素.removeChild('子节点')====将子节点从父元素中删除
语法2：节点.remove()====将自己删除,自杀替换节点
父节点.replacechild(新节点，老节点)克隆节点
节点.cloneNode(参数)===把该节点复制一份出来
参数可以写false，也可以写true
写false===只复制自己，不复制后代=====默认值
写true：自己和后代都复制出来节点属性(了解)
1）nodeType属性====可以获取到节点的类型，可以通过数字判断你这个节点到底是哪种类型的节点
元素节点：1
属性节点：2
文本节点：3
注释节点：8
2)nodeName=====可以得到节点名称
元素节点：节点名称就是大写的标签名称
属性节点：节点名称就是属性名字
文本节点：节点名称就是#text
注释节点：节点名称就是#comment
3）nodeValue====节点的内容
元素节点：是null
属性节点：就是属性值
文本节点：就是文本内容（包含换行和空格的）
注释节点：就是注释内容