DOM(Document Object Modal)，DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口
Document 对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
获取dom方法，看以下例子
document.getElementById() //元素id 在ie8一下的浏览器，不区分id大小写，匹配name属性的元素 document.getElementsByTagName() //标签名 document.getElementsByName() //只有部分标签name可生效（表单，img, iframe） document.getElementsByClassName() //类名 -> ie8和ie8以下的ie版本中没有 // 生成的doms动态的实时的
这些获取dom的方法是实时的，意思是比如我一开始获得dom取dom的高度，一段操作多这个dom高度进行变化后，再从之前获取的dom中取dom的高度，前后两者变化是不一样的。
而获取静态dom看以下例子
document.querySelector() //css选择器 ie7和ie7以下的ie版本中没有 document.querySelectorAll() //css选择器 ie7和ie7以下的ie版本中没有 // 生成的doms静态的
这两个方法无论dom怎么变化，前后从dom中拿到的值是一样的。但是注意是有兼容性
遍历节点树
节点类型有以下几种：
元素=1，属性=2，文本=3，注释=8，document=9，DocumentFragment=11
注意：前面代表类型，后面代表该类型对应的类型值
节点的上下级关系又分这几种：
parentNode -> 父节点(最顶层的parentNode是#document)
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling -> 后一个兄弟节点
previousSibling -> 前一个兄弟节点
而节点中，最重要的是元素节点，基于元素节点树的遍历有分这几种：
parentElement -> 返回当前元素的父元素节点(最顶层的是html，#document不是元素)（IE9及以下不兼容）
children -> 只返回当前元素的元素子节点
node.childElementCount（IE9及以下不兼容） === node.children.length -> 当前元素节点的子节点
firstELementChild -> 返回的是第一个元素节点（IE9及以下IE不兼容）
lastElementChild -> 返回的是最后一个元素节点（IE9及以下IE不兼容）
nextELementSibling -> 后一个兄弟元素节点（IE9及以下IE不兼容）
previousELementSibling -> 前一个兄弟元素节点（IE9及以下IE不兼容）
节点包含4个属性：
nodeName 元素的标签名，以大写形式表示只读
nodeValue Text节点或Comment节点的文本内容，可读写
nodeType 该节点的类型，只读
attributes Element节点的属性集合
节点的方法：
node.hasChildNodes() //是否有子节点
dom的继承关系
document --> HTMLDocument.prototype --> Document.prototype
HTMLHeadElement
HTMLBodyElement --> HTMLElement --> Element.prototype
HTMLTitleElement
...
dom获取方法的使用限制
getElementById 方法定义在Document.prototype上，即Element节点上不能使用。
document.getElementById()
getElementsByName 方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document, Element）
document.getElementsByName()
getElementsByTagName 方法定义在Document.prototypr和Element.prototype上
document.getElementsByTagName()
element.getElementsByTagName()
HTMLDocument.prototype 定义了一些常用的属性，body,head分别指代HTML文档中的<body><head>标签
document.body -> body
document.head -> head
Document.prototype 上定义了documentElement,指代文档的根元素，在HTML文档中，他总是指代<html>元素
document.documentElement -> html
getElementsByClassName, querySelectorAll, querySelector 在Document.prototype, Element.prototype类中均有定义
document.getElementsByClassName() element.getElementsByClassName()
document.querySelectorAll() element.querySelectorAll()
document.querySelector() element.querySelector()
dom的一些方法，看一下例子
// 增 document.createElement() //创建元素节点 document.createTextNode() //创建文本节点 document.createComment() //创建注释节点 document.createDocumentFragment() //创建文档碎片节点 // 插 PARENTNODE.appendChild() //元素节点内插入节点 （剪切操作） PARENTNODE.insertBefore(a, b) //在父级内，a元素节点插入b元素节点之前 // 删 parent.removeChild() //父节点删除子节点 （剪切，并不是真正删除，节点还保存在返回值中） child.remove() //子节点删除自身（彻底销毁） // 替换 parent.replaceChild(new, origin)
// 方法
setAttribute() //设置属性值
getAttribute() //获得属性值
自定义方法：元素后面插入元素节点
Element.prototype.insertAfter = function(targetNode, afterNode) { var beforeNode = afterNode.nextElementSibling //忽略兼容 if (beforeNode == null) { this.appendChild(targetNode) } else { this.insertBefore(targetNode, beforeNode) } }
end ！！！