DOM

一.概念

DOM（Document Object Model）的缩写，即文档对象模型
DOM是针对HTML和XML文档的一个API。
DOM描绘了一个层次化的节点树，即HTML文档中的所有内容都是节点(node)。
DOM树中的所有节点均可通过JS进行访问，允许开发人员添加.移除.修改和查询页面的某一部分

二.DOM

1.节点类型

1.1.文档节点

整个文档是一个'文档节点'

1.2.元素节点

每一个HTML元素是'元素节点'

1.3.文本节点

HTML元素内的文本是'文本节点'(回车也是文本节点)

1.4.属性节点

每个HTML的属性是'属性节点'

1.5.注释节点

注释是'注释节点'

2.nodeType属性

返回一个整数，这个数值代表节点的类型
1.元素节点 返回1
2.属性节点 返回2
3.文本节点 返回3
4.注释节点 返回8
5.文档节点 返回9

3.nodeName属性

返回节点的名称
1.元素节点 返回 标签名称(大写)
2.属性节点 返回 属性名称
3.文本节点 返回 永远都是 #text
4.注释节点 返回 永远都是 #comment
5.文档节点 返回 永远都是 #document

4.tagName属性

返回元素的标签名
在HTML中，tagName属性的返回值始终是大写的

5.nodeValue属性

返回节点的值
1.元素节点 返回 undefined或者null
2.文本节点 返回 文本内容
3.属性节点 返回 属性值
4.注释节点 返回 注释内容
5.文档节点 返回 null
注：对于元素节点，用innerHTML/innerText/value设置或取值

6.节点关系

节点之间的关系，通常用家庭中的辈分关系来描述

• parentNode:父节点
• children:所有元素子节点
• childNodes:所有子节点，ie678与高版本浏览器返回值不一样
• nextSibling:下一个兄弟节点
• previousSibling: 上一个兄弟节点
• firstChild:第一个子节点
  -lastChild:最后一个子节点

   属性1                              属性2                               描述
nextSibling                 nextElementSibling 不兼容IE678           下一个兄弟节点
previousSibling             previousElementSibling 不兼容IE678       上一个兄弟节点
firstChild                  firstElementChild 不兼容IE678            第一个子节点
lastChild                   lastElementChild 不兼容IE678             最后一个子节点

7.节点方法

DocumentFragment

documentFragment是一个文档碎片，是一种‘轻量级节点’，是一个虚拟的节点对象
documentFragment的nodeType值为11，nodeName的值为f#document-fragment
通常作为仓库来使用，不存在DOM树上，将多个需要插入的新节点放在文档碎片上，再插入文档中可以优化DOM操作

 var Fragment=document.createDocumentFragment();  //创建一个文档碎片

8.获取元素样式

行间样式和非行间样式

8.1行间样式：

<div class="box2" style="width: 200px;height: 100px;background:blue;"></div>
console.log( box1.style.width );

8.2非行间样式：

css:
.box1{
    width: 100px;
    height: 100px;
    background: red;
}
html:
<div class="box1"></div>
console.log( box2.style.width );

8.3getComputedStyle获取样式(不兼容IE678)
getComputedStyle(对象,参数).样式
第一个参数是元素对象
第二个参数可以是任何数据,通常写为null或false

eg:
    getComputedStyle(box1,null).width;

注：currentStyle：IE678获取样式的方法
如：obj.currentStyle.样式
兼容性处理：

function getStyle(dom,attr){
    if (dom.currentStyle) {//IE
        return dom.currentStyle[attr];
    } else {
        return getComputedStyle(dom,null)[attr];
    }
}

9.offset/client系列属性

获取滚动条高度一般使用如下方式:
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;