一. HTML DOM树
文档节点（document对象）：代表整个文档
元素节点（element对象）：代表一个元素（标签）
文本节点（text对象）：代表元素（标签）中的文本
属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
注释是注释节点（comment对象）
javascript可以通过DOM创建动态的HTML：
如：可以改变页面中的所有HTML元素；能够改变页面中的所有HTML属性；能够改变页面中的所有CSS样式；能够对页面中的所有事件作出反应。
二. 查找标签
1.直接查找
document.getElementById("id名") 根据ID获取一个标签
document.getElementsByClasssName("类名") 根据class属性获取
document.getElementsByTagName("标签名") 根据标签名获取标签集合
2. 间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
三.节点操作
1.创建节点
createElement(标签名)
如： var imgEle = document.createElement("img");
2.添加节点
父节点.appendChild(newnode); 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点)； 把增加的节点放到某个节点的前边
3.删除节点
removeChild(要删除的节点) 获得要删除的元素，通过父元素调用删除
4.替换节点
somenode.replaceChild(newnode,某个节点) 括号里第一个参数节点替换掉第二个参数节点
5.属性节点
获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值：
var divEle = document.getElementById("d1") divEle.innerText="div内容" divEle.innerHTML="<p>p内容</p>"
attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
四. 获取值操作
语法：元素节点.value (适用标签有：input select textarea)
五. class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
六.指定CSS操作
obj.style.backgroundColor="red";
javascript操作CSS的规律：
1.对于没有中横线的CSS属性一般直接使用 style.属性名 即可。如：obj.style.position
2.对于含有中横线的CSS属性，将中横线后面的第一个字母换成大写，采用驼峰式，如：obj.style.marginTop
七.事件
常用事件：
onclick 点击事件
ondblclick 双击事件
onfocus 元素获得焦点事件
onblur 元素失去焦点事件
onchange 元素内容改变触发事件