js学习笔记（十三）DOM文档对象模型
1、Node对象 Element、Document对象继承他
| 属性名/方法名 | 作用 |
| childNodes | 返回的是一个NodeList对象，也可以看成是一个数组，它表示调用该属性的节点对象下的所有子节点，可以用childNodes[]来引用数组中单独的元素 |
| parentNode | 返回节点的父节点 |
| nodeType | 返回节点的节点类型，IE只支持数字值，FF还支持常量值。1：ELEMENT节点，2：ATTRIBUTE节点，3：TEXT节点，9：DOCUMENT节点 |
| nodeName | 返回节点的名称，即标签名称 |
| firstChild | 返回第一个子节点 |
| lastChild | 返回最后一个子节点 |
| previousSibling | 返回调用该属性的节点的前一个兄弟节点，没有则返回null |
| nextSibling | 返回调用该属性的节点的后一个兄弟节点，没有则返回null |
| appendChild() | 向调用该方法的节点的子节点列表末尾添加节点。注意其参数是一个节点，而不是一个标签。该方法返回的是这个新添加进去的节点,要注意的是，如果要添加的节点已经是文档的一部分的话，那么首先会删除文档原先存在的节点 |
| cloneNode() | 拷贝节点。当里面参数为true时，那么节点的所有子节点也会被克隆。该方法返回拷贝的节点 |
| removeChild() | 从子节点列表中删除指定的节点，参数是要删除的节点。成功则返回被删除的节点，失败则返回null |
| replaceChild(a,b) | 将某个子节点替换为另一个,成功则返回被替换的节点，失败则返回null。第一个参数为用来替换的新节点，第二个参数为将要被替换的节点 |
| insertBefore(a,b) | 在某个子节点前插入新的子节点，并返回新的子节点。第一个参数为要插入的新的子节点，第二个参数指定要在哪个子节点前插入新节点 |
2、Document对象。Document 对象是一棵文档树的根，可为我们提供对文档数据的最初（或最顶层）的访问入口。 HTMLDocument继承他
| 属性名/方法名 | 作用 |
| getElementsByTagName() | 返回指定标签的元素节点，类型为数组。例如 document.getElementsByTagName(“p”) |
| getElementById() | 返回指定ID的元素节点，类型为单个元素。例如 document.getElementById(“id”) |
| creatElement() | 创建一个元素节点，并返回该元素节点。例如 document.creatElement(“div”) |
| documentElement | 返回对文档根元素的引用 |
HTMLDocument对象。DOM的Document对象放到HTML文档中则成为了HTMLDocument对象
| 属性名/方法名 | 作用 |
| getElementsByName() | 返回指定name的元素节点，类型为数组。例如 document.getElementsByName(“name”) |
Element对象 HTMLElement对象继承他
| 属性名/方法名 | 作用 |
| getElementsByTagName() | 该方法与Documen对象的同名方法类似，不过该方法把查找的范围限定在了调用该方法的元素节点内 |
| steAttribute(a,b) | 该方法用来改变或创建（当要改变的属性没设置时）节点元素的属性,第一个参数为属性名，第二个参数为属性值，例如element.setAttribute(“id”,”hcp”) |
| getAttribute() | 该方法用来获取元素节点的属性值，参数为属性名。例如 element.getAttribute(“id”) |
| removeAttribute() | 删除元素节点的属性，参数为属性名。例如 element.removeAttribute(“id”) |
HTMLElement对象
| 属性名/方法名 | 作用 |
| className | 元素的class属性 |
| currentStyle | 该属性为一个对象 |
| innerHTML | 该属性可设置元素内HTML文本串，HTML代码会被执行（该属性非w3c标准） |
| innerText | 该属性可设置元素内的纯文本，即使文本包含有html代码也不会被浏览器执行，而是当作纯文本（非w3c标准） |
| outerHTML | 设置元素内的HTML文本串，元素本身也包括在内（非w3c标准） |
| outerText | 设置元素内的纯文本，即使文本包含有html代码也不会被浏览器执行，而是当作纯文本.元素本身也包括在内（非w3c标准） |
| offsetWidth | 返回元素可见区域的宽度，不带单位，单位为px。可见宽度包括元素本身、padding、border。 |
| offsetHeight | 作用同上 |
| clientWidth | 作用性质与offsetWidth相似，不过它计算的只是元素本身+padding的值， |
| clientHeight | 作用同上 |
| offsetLeft | 返回元素的可见区域的边界距其父元素本身（即不考虑padding、margin、border）的边界的左边偏移量，如果其父元素（或更高级的父元素）没有相对或绝对定位属性，则会把body算作其父元素。使用此属性时最好把父元素设成绝对或相对定位。另外，不管此元素是绝对定位还是静态定位都适用于该属性 |
| offsetTop | 作用同上。没有 |
| offsetParent | 返回对最近的具有相对或绝对定位的父元素的引用。该属性不是w3c标准，但得到了很好的支持 |
| scrollWidth | 返回元素的本身宽度加上padding加上可滚动的宽度（如果有滚动条的话），注意，IE6、7下有滚动条的时候，padding左右两边的宽度都会算在内，但在IE8、FF下有滚动条的时候，只有左边的padding才会有作用，因此只会加上左边padding的宽度 |
| scrollHeight | 作用同上，该属性不是w3c标准，但得到了很好的支持 |
| scrollTop | 相当于返回或设置已滚动区域的高度 |
| scrollLeft | 作用同上，该属性不是w3c标准，但得到了很好的支持 |
CSS2Properties对象，用来获取元素样式
1、 element.style引用的是一个CSS2Properties对象，此时该对象只代表内联样式的集合，即由HTML标签中的style属性设置的样式。
2、element.currentStyle引用了一个CSS2Properties对象，不过该对象包含的是元素的最终样式，该属性只能用于IE浏览器。 该属性为只读
用法举例： var s=element.currentStyle.fontSize
3、 window.getComputedStyle() 或document.defaultView.getComputedStyle() 是FF等标准浏览器中用来获取对象样式的函数，该函数返回的是一个CSS2Properties对象，此对象包括了元素的最终样式。该函数有两个参数，第一个为要获取样式的元素对象，第二个参数为伪元素，一般设为null. 该属性为只读
用法举例：var s= window.getComputedStyle(element,null).fontSize
DocumentFragment节点
DocumentFragment节点是一种特殊类型的节点，它自身不出现在文档中，只做为连续节点集合的临时容器，并允许将这些连续的节点作为一个对象来操作。当把一个DocumentFragment插入文档时（用appendChild(),insertBefore(),replaceChild()方法），插入的不是DocumentFragment,而是它里面包含的节点
示例： var f=document.createDocumentFragment(); //获取一个空的DocumentFragment对象
f.appendChild(element1) //给DocumentFragment添加节点
f.appendChild(element2) //给DocumentFragment添加节点
element3.appendChild(f) //把element1、element2作为一个整体插入element3
DocumentFragment对象的好处在于可以减少浏览器回流，提高效率
