DOM是采用树形结构表示页面的每一个元素，操作元素时，可以把这个元素看成一个对象，然后用这个对象的属性和方法进行相关操作。
常见的DOM结点有3种，元素节点、属性节点、文本节点。用noteType判断一个节点的类型三个节点分别对应1、2、3
在CSS里，通过选择器来操作。但是在JS里，有另外一套方式，可以通过以下6种方法来获取指定元素。
动态DOM就是JS创建的元素一开始在HTML里不存在
var el = document.createElement("元素名")； //创建元素节点
var txt = document.createTextNode("文本内容")； //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2.appendChild(e1); //把组装好的元素插入已经存在的元素中
1、插入元素
A.appendChild(B); //把新元素插入到父元素的内部子元素的末尾，A表示父元素，B表示动态创建好的新元素
A.insertBefore(B,ref); //新元素插入到父元素的某一个子元素之前 A是父元素，B是新子元素，ref表示指定子元素。
2、删除元素
A.removeChild(B); //A表示父元素，B表示父元素内部的某个子元素
3、复制元素
obj.cloneNode(bool)
//obj表示被复制的元素，元素bool是一个布尔值 取1或者true时，表示复制元素本身及其子元素。取0或者false时，仅仅复制元素本身，而不复制其子元素。
4、替换元素
A.replaceChild(new,old); //A是父元素，new表示新子元素，old表示旧子元素
操作HTML属性有两种操作，一种是通过对象属性一种是通过对象方法。这两种操作都涉及两种操作：
5、获取HTML属性：
obj.attr //obj是元素名，是一个DOM对象。attr是属性名，通过 . 来获取属性值，获取一个元素
的class值，要通过oBtn.className 。一般文本框、单选按钮、复选框、下拉列表的值都是通过value属性获取的。
6、设置HTML属性值: obj.attr="值"；
7、HTML属性操作（对象方法）：
getAttribute() //obj.getAttribute("attr")等价于 obj.attr 都可以获取静态HTML值以及动态DOM属性值
setAttribute() //obj.setAttribute("attr","值") 设置某个元素某个属性的值，等价于obj.attr="值"；
removeAttribute() //obj.removeAttribute("attr") 删除某个元素的属性
hasAttribute() //obj.hasAttribute("attr")判断元素是否含有某个属性，如果有这个属性返回true否则返回false
8、CSS属性操作：在JS中CSS属性操作有两种，获取CSS属性值和设置CSS属性值
获取CSS属性值： getComputedStyle(obj).attr //这个方法不支持早期的IE浏览器，
设置CSS属性值：有两种方法
a、Style对象：obj.style.attr="值"； //等价于obj.style["attr"]，只能获取元素style属性中设置的CSS属性，没办法获取内部样式或者外部样式。
b、cssText属性：obj.style.cssText="值"； //cssText的值是一个字符串，字符串中的属性名不要用驼峰命名法。
9、DOM遍历
查找父元素：obj.parentNode
查找子元素：
childNodes、firstChild、lastChild //childNodes获取的所有子节点
children、firstElementChild、lastElementChild //children获取的是所有元素结点，不包括文本节点。
查找兄弟元素：
previousSibling、nextSibling //分别是查找前一个兄弟节点和查找后一个兄弟节点
previousElementSibling、nextElementSibling //查找前一个兄弟元素节点和查找后一个兄弟元素节点
10、innerHTML和innerText
innerHTML可以很方便的获取和设置一个元素的内部元素，innerText可以获取和设置一个元素的内部文本。