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