DOM

DOM树概念：

DOM将我们的HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document的对象
- document对象：不需要我们程序员创建，由浏览器的js解释器自动创建，一个页面只有一个document树根
- 作用：可以通过树根找到我们想要的任何一个DOM元素/节点/对象（属性和方法）
- DOM会将页面上的每个元素、属性、文本、注释等等都会被视为一个DOM元素/节点/对象

1、通过 ID 查找元素：var elem=document.getElementById("id值");
- 特殊：
  - 返回值，找到了返回当前找到DOM元素，没找到返回的一个null
  - 如果出现多个相同id，只会找到第一个
  - 记住控制台输出的样子，这个样子才叫做一个DOM元素/节点/对象，才可以下午去做操作
  - 忘记此方法，不允许使用，id不好用，一次只能找一个元素。id留给后端用
  - 其实根本不用查找，id直接可用
通过标签名查找元素：var elems=document/已经找到的父元素.getElementsByTagName("标签名");
- 特殊：
  - 返回值，找到了返回一个类数组DOM集合，没找到得到空集合
  - js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
  - 不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素
通过 class 查找元素：：var elems=document/已经找到的父元素.getElementsByClassName("class名");
- 特殊：
  - 返回值，找到了返回一个类数组DOM集合，没找到得到空集合
  - js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。
  - 不一定非要从document开始查找，如果从document去找，会找到所有的元素，可以换成我们已经找到的某个父元素

elem.innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的
- 获取：elem.innerHTML;
- 设置：elem.innerHTML="新内容";
elem.innerText - 获取和设置开始标签到结束标签之间的纯文本，不识别标签的
- 获取：elem.innerText;
- 设置：elem.innerText="新内容";
以上两个属性都是专门为双标签准备，而有一个单标签也是可以写内容，叫做，我们如何获取？
input.value - 专门获取/设置input里的内容
- 获取：input.value;
- 设置：input.value="新内容";

elem.on事件名=function(){
操作;
*****关键字`this` - 这个
如果单个元素绑定事件，this->这个元素
如果多个元素绑定事件，this->当前触发事件元素
}