1、*****DOM：
Document Object Model：文档对象模型，专门用于操作HTML文档的，提供了一些方法给你。
2、DOM树概念
DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是HTML标签，而是document对象
document对象：不需要程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
作用：可以通过树根对象找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象
3、查找元素：两大方面
1、直接通过 HTML 的特点去查找元素
1、通过 ID 去查找元素
var elem=document.getElementById("id值");
特殊：
1、返回值，找到了返回当前找到的DOM元素，没找到返回一个null
2、如果出现了多个相同id，只会找到第一个
3、*记住控制台输出的样子，这个样子才叫做一个DOM元素/节点/对象，才可以下午拿去做操作！
4、忘记此方法，不允许使用，id不好用，一次只能找到一个元素，把id留给后端使用
5、其实id根本不用查找，可以直接使用
2、*通过 标签名 去查找元素：
var elems=document/已经找到的某个父元素.getElementsByTagName("标签名");
特殊：
1、返回值，找到了返回的是一个类数组DOM集合，没找到返回空集合
2、*js只能直接操作DOM元素，不能直接操作DOM集合！解决：要么下标拿到某一个元素，要么遍历拿到每一个元素
3、不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素
3、*通过 class名 去查找元素：
var elems=document/已经找到的某个父元素.getElementsByClassName("class名");
特殊：同上
2、通过 元素之间的关系 去查找元素：
前提：至少要【先找到一个元素】才可以使用关系网：
1、父亲：elem.parentNode;//单个元素
2、儿子：elem.children;//集合
3、第一个儿子：elem.firstElementChild;//单个元素
4、最后一个儿子：elem.lastElementChild;//单个元素
5、前一个兄弟：elem.previousElementSibling;//单个元素
6、后一个兄弟：elem.nextElementSibling;//单个元素
4、操作元素：
前提：先找到元素，才能操作元素，分三方面：
<标签名 属性="" style="样式">内容</标签名>
1、*内容：
1、*elem.innerHTML - 获取或设置开始标签到结束标签之间的内容，【支持识别标签的】
获取：elem.innerHTML;
设置：elem.innerHTML="新内容";
2、elem.innerText - 获取或设置开始标签到结束标签之间的纯文本，不支持识别标签的
获取：elem.innerText;
设置：elem.innerText="新内容";
3、input.value; - 专门获取/设置input的内容
获取：input.value;
设置：input.value="新内容";
2、属性：
1、*获取属性值：elem.getAttribute("属性名");
2、*设置属性值：elem.setAttribute("属性名","属性值");
简化版：
1、*获取属性值：elem.属性名;
2、*设置属性值：elem.属性名="属性值";
简化版有两个缺陷：
1、class必须写成className - ES2015(ES6)class变成了一个关键字
2、只能操作标准属性，不能操作自定义属性
3、*样式：
使用样式的方式：3种
1、*内联样式
2、内部样式表
3、外部样式表 - 一阶段做开发用的都是外部样式表
二阶段我们就要用js来操作【内联样式】
1、不会牵一发动全身
2、优先级最高
获取样式：elem.style.css属性名;
设置样式：elem.style.css属性名="css属性值";
特殊点：
1、css属性名，有横线的地方，要去掉横线，变为小驼峰命名法
background-color ---> backgroundColor
border-radius ---> borderRadius
2、小缺陷：获取时，由于我们只学了操作内联样式，所以我们也只能获取到内联样式！
强调：
一切的获取，都是为了做判断！
一切的设置，说白了就是在修改！
4、*绑定事件：
elem.on事件名=function(){
操作;
***关键字this - 这个，只能在【事件】内使用
· 如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件的元素！！！
}
