DOM的基础概念

• DOM(document object modle)文本对象模型，通过操作DOM我们可以方便的操作文档内容
• 什么是节点？
  • 文档中的所有内容都可以称之为节点，包括：标签节点、注释节点、文本节点、属性节点。
  • 其中标签节点也可以称为元素，所以元素是属于节点的。
• DOM的具体作用
  • 设置文档内容并控制
  • 获取标签样式
  • 设置标签样式
  • 动态创建标签

获取元素

• document.getElementById(id值)如果给标签设置了id值，那么使用这个方法并把id值传入就可以获取到对应的标签，返回的标签是一个对象，可以通过对象属性的赋值与访问来操作标签。
• document.getElementsByTagName(标签名)使用这个方法并把标签名传入，可以批量获取到对应标签，返回的是一个HTML集合也可以叫做伪数组，它有数组类似的特性（数字索引，length属性等），但绝对不是数组。
• document.getElementsByClassName(类名)，这个方法与通过标签名获取的用法一摸一样，包括限制元素获取范围。但是ie6,7,8不支持
  • 限制批量获取元素范围：
  • getElementsByTagName(标签名) 这个方法除了可以被document调用外，还可以被普通元素调用
  • 例如：有一个<div id="name">假设有多个input标签</div>，那么可以先通过document.getElementById()获取到id为name的div盒子，然后再用获取到的盒子来调用getElementsByTagName(标签名)，就可以只获取这个盒子内的对应标签集合。
  • 所以，用元素调用这个方法就是只获取该元素内的对应标签集合。

阻止a标签默认跳转行为

• 给a标签设置onclick="return false"，就能a标签点击也不跳转。
• 注意如果在onclick中调用函数，函数虽然也能返回值，但是仅仅只返回false这个布尔值。所以还要在调用函数前写return才可以。例如：<a onclick="return fun();"></a>

事件三要素

• 事件源.事件 = 事件处理。这个格式组成了事件三要素，它的好处是不用再html和js混写，实现结构分离。
• 比如点击小图切换大图。小图就是事件源，点击就是事件，切换大图就是事件处理。

批量注册事件

• 批量注册事件只针对于批量获取到元素集合，因为获取到的单个元素对象也没必要批量注册了。
• 前面说了，批量获取到的元素集合是伪数组具有一定数组的特性，所以就可以使用for循环来遍历集合，并依次给循环到的元素注册事件即可。
• 另外通过循环批量注册事件时，如果要用到元素自身的值，那么需要使用this.属性，因为this不会受循环的影响，永远指向当前对象。

事件名汇总

• onclick鼠标点击事件
• onmouseover鼠标经过事件
• onmouseout鼠标离开事件
• onfocus获得焦点事件
• onblur 失去焦点事件
• onkeyup键盘弹起事件
• onkeydown键盘按下事件
• ondblclick双击事件
• onscroll窗体滚动事件

元素的内容属性

• 元素对象.innerText这个属性可以获取到元素内部的所有文本内容，如果给其赋值，那么赋值不管是什么内容都是纯文本
• 元素对象.textContent它的作用和innerText完全一样，只是浏览器的兼容不同。大部分新的浏览器两个都支持，旧版火狐只支持textContent，旧版ie(ie9以下)只支持innerText
  • 关于innerText和textContent兼容问题的解决，这里使用能力测试方法，封装成函数
    function getSiteInner(element, content) {
//如果能够兼容.innerText那么它的返回类型就是字符串，否则返回undefined
if(typeof(element.innerText) === "string") {
element.innerText = content;
return element.innerText; //如果没有传入第二个参数就直接返回原值
} else {
element.textContent = content;
return element.textConent;
}
}
• 元素对象.innerHTML这个属性可以获取元素内部完整的html结构，如果给其赋值符合html规范的标签结构，那么就是正常的html结构

通过事件给标签设置类名

• 操作步骤还是很简单的，就是获取到对应元素修改属性值就好。
• 但是这里要注意，因为class在js中是保留字，所以不能这样操作。在js中修改元素类名方式：元素.className

DOM操作表单控件input

• 点击禁用文本框
  • 元素对象.disabled=布尔值获取到元素后设置这个属性可以禁用input控件，默认状态是不禁用false，设置true就禁用。如果想批量禁用文本框，获取集合循环设置即可。
• 获取表单控件值
  • 元素对象.value通过value属性，可以获取input元素的值，也可以通过它来赋值。
  • 如果想批量拼接value值，那么把它获取的value值集合用循环遍历的方式赋给一个数组，然后数组再调用join()方法即可
• 点击选中select选项
  • 在html里给select任意一个选项设置selected="selected"就是可以让它成为默认选中项。
  • 同理如果想通过dom来控制它被事件触发选中，就可以给获取到的选项设置元素.selcet = "true"，默认值是false就是不选中。
• 点击选中checked选项
  • 给获取到的复选框设置元素.checked=true|false，可以改变它的选中状态。全选和反选的案例非常重要一定要理解透彻
• 排他思想
  • 排他思想就是在获取的元素集合中只给当前触发事件的元素应用设置，其他元素都不应用。那么在应用设置前，就得遍历所有元素并且清空它们的对应设置，然后再给当前元素单独设置。这就是排他思想
  • 多应用于切换效果上
  • tag标签切换案例非常重要一定要理解透彻