1.DOM简介 ——?DOM操作，可以简单理解成“元素操作”
全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。
DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素.?
我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。
2.节点类型? ——?DOM节点共有12种类型，不过常见的只有3种。?
- （1）元素节点? ?nodeType值：1
- （2）属性节点? ? ?2
- （3）文本节点? ? 3
只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
3.获取元素
oDiv = document.getElementById("id名")
getElementById()获取的是一个DOM对象，在给变量命名的时候，习惯以英文“o”开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个DOM对象.
还有?getElementsByTagName() 返回一个类数组：类数组只能用到两点：length属性；下标形式
getElementsByClassName() 同样返回一个类数组。按类名
getElementsByName()针对表单name属性，一般只用于单选按钮和复选框，返回类数组
document.querySelector("选择器"); document.querySelectorAll("选择器");?
document.title和document.body
4.创建元素 ——“动态DOM操作”
动态DOM操作指? 使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。
创建一个元素需要四步： （中间可以元素.属性 = ... 进行赋值 ）
① 创建元素节点：createElement()
② 创建文本节点：createTextNode()
③ 把文本节点插入元素节点：appendChild()
④ 把组装好的元素插入到已有元素中：appendChild()
?5.插入元素，删除元素，复制元素，替换元素
A.insertBefore(B,ref);?一个新元素插入到父元素中的某一个子元素“之前”。
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素
删除某个 A.removeChild(B);或 删除整个列表 removeChild()
obj.cloneNode(bool)?参数obj表示被复制的元素，而参数bool是一个布尔值，取1
A.replaceChild(new,old);
6.HTML属性操作——对象属性，对象方法
对象属性：obj.attr? 值得注意的是获取一个元素的class时，正确的应该写成oBtn.className
对象方法：obj.getAttribute("attr")??
两者区别，对于用户自定义的元素的属性，只能通过getAttribute("attr") 【即对象方法】获得。
设置元素属性值 ------? obj.setAttribute("attr","值")? ?/? ?obj.attr = "值";? 同样的 对于自定义属性的值，也只能用setAttribute()方法来实现
obj.removeAttribute("attr") 删除某个属性
使用hasAttribute()方法来判断元素是否含有某个属性，返回一个布尔值
对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性
7. CSS属性操作
getComputedStyle()方法来获取一个CSS属性的取值.?
getComputedStyle(obj).attr 等价于?getComputedStyle(obj)["attr"]
obj表示DOM对象. attr表示CSS属性名,这里使用的是“骆驼峰型”的CSS属性名。
用style来设置css的属性值? obj.style.attr = "值"; 对于获取到的值attr 要用obj.style[“attr”]方法设置
cssText属性： 使用cssText属性来同时设置多个CSS属性
例如 obj.style.cssText = "width:100px;height:100px;border:1px solid gray;";
8.DOM遍历
DOM遍历是查找元素的意思? 查找父元素，子元素，兄弟元素。
父元素 obj.parentNode
子元素 children、firstElementChild、lastElementChild （只针对元素节点
兄弟元素?previousElementSibling、nextElementSibling （只针对元素节点
9. innerHTML属性，innerText
使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本
innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。
注 -- 参考??http://www.lvyestudy.com