DOM简单梳理

定义：DOM：Document Object Model。
是针对HTML,XML文档的一个API（应用程序编程接口），它将任何HTML,XML文档描绘成一个由多层节点(node)构成的结构。
节点有多种类型，每种类型表示文档中不同的信息及标记，每个节点也拥有各自的特点、数据和方法，然后各节点之间也存在某种关系。
想象成一个树状图

---

一、Node节点爸爸

一共有12种节点，这些节点都继承自一个基类型Node。
1.基本属性方法：
nodeName
nodeValue
nodeType
childNodes:一个保存子元素的Nodelist
parentNodes
nextSibling - previousSibling
2.操作节点方法
appendChild()
insertBefore(node1,node2)
replaceChild(node1,node2)
removeChild(nodex)移除某个节点
cloneNode(true or false) : true表示深复制（整个子节点树），false表示浅复制(本身)

二、常用节点Document类型
JS通过Document类型表示文档，在浏览器中，document对象是继承自Document的HTMLDocument的一个实例，表示整个HTML页面。

1.方法
dcument.documentElement :取得对<html>的引用
dcument.body
dcument.doctype（注释在不同的浏览器结果不同）
dcument.title
dcument.URL/domain/referrer（修改成同一个domain可以实现跨访问）
dcument.getElementById() （大小写匹配，返回第一个符合的对象，name不要设置和ID一样，IE很多不一样）
dcument.getElementSByTagName() （返回HTMLCollection, 比如“img”,”*”表示取得所有元素）
document.write/open/close/writeln/
特殊集合: 都是HTMLCollection对象
document.anchors ：带name特性的<a>
document.forms
document.images
document.links 带href的<a>

2.一致性检查
由于DOM分为多个级别，也包含多个部分，因此检测浏览器实现了哪些部分十分必要。

三、Element元素
作用：用于变现HTML,XML元素，提供了对元素标签名、子节点、特性的访问。
1.HTML元素
标准特性：id,title,lang,dir,className

2.对特性的操作(特性部分大小写）

getAttribute()
setAttribute()
removeAttribute()

3.attributes属性
它也包含一个NamedNodeMap,动态集合
element.attributes[“id”]

注：除IE外，不能用属性的形式添加特性到DOM对象中。
一般用对象的属性来取得特性，只有取得自定义特性值时，才会使用getAttribute().
DOM操作中，<script> <style> 小心点
DOM消耗开销很大，NodeList问题最多。尽量减少DOM操作