DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口
一、节点和节点关系
DOM是以树状结构组织HTML文档的，HTML文档中的每个标签或元素都是一个节点，
01、整个文档是一个文档节点
02、每个HTML标签是一个元素节点
03、包含在HTML元素中的文本是文本节点
04、每一个HTML属性是一个属性节点
05、注释属于注释节点
访问节点
01、get系列 getElementById（）、getElementByName（）、getElementByTagName（）
02、（下列方法会把注释和空格换行作为一个节点）
parentNode 返回节点的父节点
childNodes 返回子节点的集合
firstChild 返回节点的第一个子节点
lastChild 返回节点的最后一个子节点
nextSibling 返回下一个节点
previousSibling 返回上一个节点
03、（返回元素节点-不解析空格、注释、换行）
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
nextElementSibling 下一个子节点
previousElementSibling 上一个子节点
节点信息
nodeName（节点名称）
元素的nodeName是标签名称，属性节点的nodeName是属性名称，文本节点的nodeName永远是#text，文档节点的nodeName永远是#document
nodeValue（节点值）
文本节点的nodeValue是所包含的文本，属性节点的nodeValue是对应的属性值，nodeValue对于文档节点和元素节点是不可用的
nodeType（节点类型）
元素节点：返回1
属性节点：返回2
文本节点：返回3
注释节点：返回8
文档节点：返回9
二、操作节点
操作节点属性
getAttribute（"属性名"）：用来获取属性的值（区别：getAttributeNode()-用来获得属性节点）
setAttribute（"属性名","属性值"）：用来设置属性值
创建和插入节点
createElement(tagName) 创建一个标签名为tagName的新元素节点
A.appendChild(B) 把B节点作为子节点，添加A节点的末尾
A.insertBefore(C,D) 把D节点作为子节点，添加到A节点的子节点D之前
cloneNode(deep) deep控制克隆深度，deep为true：则复制该节点及该节点的所有子节点。deep为false：只复制该节和属性
删除和替换节点（都要借助父节点parentNode来完成）
removeChild(node) 删除指定节点
replaceChild(newNode,oldNode) 替换节点
操作节点样式
style属性
语法：HTML元素.style.样式属性="值'
ClassName
HTML元素.ClassName="样式名称"（前提要在css外部文件设置了相应的样式）
获取元素样式
获取内联样式：
语法：HTML元素.style.样式属性
获取外部样式：
01、IE：
语法：HTML元素.currentStyle.样式属性
02、Firefox、opera、Safari、Chrome
语法：document.defaultView.getComputeStyle(元素,null).属性
获取元素位置
offsetLeft 返回当前元素左边界到上级元素的左边界的距离（即左外边距），只读属性
offsetTop 返回当前元素上边界到上级元素的上边界的距离（即上外边距），只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素宽度
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动天的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
获得滚动条位置有浏览器兼容问题
标准浏览器只认识：document.documentElement.scrollTop; document.documentElement.scrollLeft;
Chrome 只认识：document.body.scrollTop; document.body.scrollLeft;
解决办法：var sTop=document.documentElement.scrollTop || document.body.scrollTop;(用||逻辑关系符号)