DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
1，节点层次
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都有自己的特点、数据和方法，也与其他的节点存在某种关系。构成了层次。
<html>元素为文档元素。是文档的最外层元素。每一段标记都可以通过一个节点来表示。HTML元素通过元素点表示，特性通过特性点来表示。文档类型通过文档类型节点来表示。注释通过注释节点来表示。共有12种节点类型，这些类型都继承自一个基类型。
1，Node类型
每个节点都有一个nodeType属性。用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。
每个节点都有一个childNodes属性，其中保存着NodeList对象。可以通过方括号，也可以使用item（） 来访问Nodelist中的节点。
每个节点都有一个parentNode属性，指向父节点。 都有previousSibling 和nextSibling
父节点的firstChild和lastChild分别指向其childNodes的第一个和最后一个节点。
因为节点的关系指针都是只读的，所以DOM提供了操作节点的方法。
appendChild（） ： 向childNodes列表的末尾添加一个节点。返回新增的这个节点。如果已经有了这个节点， 那么就将该节点从原来的位置转移到最后的位置。
insertBefore（） ： 将节点插入到节点列表指定的位置。接收两个参数，被插入的节点和作为参照的节点， 被插入的节点将会变成参照节点的前一个同胞节点。
replaceChild（） ： 替换节点。接收两个参数，要插入的节点和要替换的节点。 返回要替换的节点。
removeChild（） ： 移除节点。 返回值为那个被移除的节点。
cloneNode（） ： 复制节点。 参数为 true的时候执行深复制，为false则执行浅复制。这个方法只复制特性，不会复制节点中的js属性。
2，Document类型
js通过document类型表示文档。document对象是HTMLDocument的一个实例。
Document节点有以下的特性： nodeType为9，nodeName为‘#document’
document.documentElement指向html元素，document.body指向body元素。
document.title ： 获取或修改文档的标题。
document.URL: 获取完成的URL
document.domain： 获取域名
document.referrer ： 获取来源页面的URL
document.getElementById() :
document.getElementByTageName ： 获取到HTMLCollection对象，这个对象有一个方法namedItem（），可以通过元素的name特性取得集合中的项。
document.getElementByName（） ： 获得所有有name特性的元素。
特殊集合：
document.forms： 取得文档中所有form元素。
document.images ： 取得所有的img元素。
document.links ： 取得所有带href特性的a元素
document.write（）： 页面写入内容
3，Element类型
element类型为xml或者html的元素。提供了对元素的标签名，子节点和特性的访问。
特性：nodeType为1， nodeName的值为元素的标签名。 parentNode可能为Document或者Element
标准属性： id、 title 、 lang（元素内容的语言代码，很少使用）、dir（值为ltr或rtl）、className
取得特性： getAttribute（） 有两类特殊的特性，通过getAttribute返回的值并不相同。第一个就是style，返回的是style的字符串。 第二个就是onlick这样的事件处理程序，返回的也是相应代码的字符串。基于这些，一般只有在取得自定义特性值的时候，才使用getAttribute的方法。
setAttribute（） ：参数为 要设置的特性名 和值
removeAttribute（）： 删除元素的特性。
attributes属性
创建元素
document.createElement()可以创建新元素，参数为要创建元素的标签名。
元素的子节点
元素的childNodes属性中包含了它的所有的子节点
4，Text类型
文本节点由Text类型表示，包含的可以是纯文本内容。
特性： nodeType为3， nodeName为‘#text’， nodeValue为节点所包含的文本。 不支持子节点
创建文本节点
document.createTextNode()创建新文本节点。参数为要插入的文本。
规范化文本节点
normalize（）可以将一个包含多个文本节点的父元素的所有文本节点合并成一个节点。
splitText（） ： 按照指定的位置分割ndoeValue
5，Comment类型
注释类型，特性为： nodeType为8，nodeName为‘#comment’，nodeValue为注释内容
6，DocumentFragment类型
文档片段在文档中是没有对应的标记的。不过可以包含和控制节点。
document.createDocumentFragment()
7，Attr类型
元素的特性就是Attr类型来表示。
特征为： nodeType为2，nodeName为特性的名称，nodeValue为特性的值
2，DOM操作技术
1，动态脚本
var script = document.createElement('srcipt'); script.type = 'text/javascript'; script.scr='index.js'; document.body.appendChild(script);
2，动态样式
<link>包含来自外部的文件，<style>元素则指定嵌入的样式。
3，操作表格
为了方便操作table，为table tbody和tr添加了一些属性和方法
4，使用NodeList
NodeList是在访问DOM文档时实时运行的查询。
DOM扩展
1，选择符API
1，querySelector（） querySelectorAll（）
2，元素遍历
3，HTML5
1，类相关的扩展
getElementByClassName
classList属性
操作类名的方式，
add（）： 将给定的类名字符串添加到列表中
contains（） ： 列表中是否存在给定的值
remove（value） ： 删除给定字符串
toggle（value） ： 如果列表中有就删除，没有就添加
2，焦点管理
document.activeElement（），获取DOM当前获得焦点的元素。
document.hasFocus() ， 确定文档是否获得了焦点
3，HTMLDocument的变化
readyState属性： 有两个值 loading和complete
兼容模式
head属性： document.head
4，字符集属性
charset属性： document.charset = 'UTF-8'
5，自定义数据属性
元素可以添加非标准的属性，但是要添加data-，添加了自定义属性后，就可以通过元素的dataset属性来访问自定义属性的值，
6，插入标记
innerHTML属性
outerHTML属性
insertAdjacentHTML（） 方法
7，scrollIntoView（）
可以在所有的HTML元素上调用，如果给这个方法传入true，或者不传参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false，则调用元素尽可能全部出现在视口中。
4，专有扩展
1，文档模式
2，children属性
只包含元素中同样还是元素的子节点，其他的和childNodes一样。
3，contains（）
判断某个节点是不是另一个节点的后代
4，插入文本
innerText
outerText
5，滚动
scrollIntoViewIfNeeded（alignCenter） ： 只在当前元素在视口中不可见的时候，才滚动浏览器窗口或者容器元素，最终让其可见。参数为true的话，则表示尽量将元素显示在视口中部（垂直方向）
scrollByLines（lineCount）： 将元素的内容滚动指定的行高
scrollByPages（pageCount） ： 将元素的内容滚动指定的页面高度。
样式 ：
在html中定义样式的方式有3种：<link>元素引用外部样式表文件。 使用<style>元素定义嵌入式样式。以及使用style特性定义针对特定元素的样式。
访问元素的样式：
el.style.属性名： 获取style特性中指定的样式。
计算的样式：
getComputedStyle() ，参数为要计算样式的元素 和一个 为伪元素字符串。返回值为一个CSSStyleDeclaration对象，包含当前元素的所有计算的样式。
元素大小：
1，偏移量
offsetHeight： 元素在垂直方向占用的空间大小，包括元素高度，水平滚动条的高度，边框高度
offsetWidth： 元素在水平方向上占用的空间大小，包括元素高度，垂直滚动条的宽度，边框宽度。
offsetLeft ： 元素左外边框 到 包含元素的左内边框之间的距离 这里的包含元素指的是含有定位的祖先元素。
offsetTop： 上外边框 到包含元素上内边框之间的距离
2，客户区大小
clientWidth：元素宽度加上左右内边距
clientHeight： 元素 高度加上左右内边距
3，滚动大小
scrollHeight：元素内容的总高度
scrollWidth： 元素内容的总宽度
scrollTop： y轴滚动的距离
scrollLeft： x轴滚动的距离
4，确定元素大小
getBoundingClientRect（） ：返回值为一个矩形对象：包含left top right bottom