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。margin不属于可见区域，如果有滚动条，没被显示出 来的那部分也不属于可见区域。在IE下如果元素被撑大，则会计算撑大后 的可见区域宽度。总之该属性返回的是实际的可见区域宽度。该属性不是 w3c标准，但得到了很好的支持
offsetHeight	作用同上
clientWidth	作用性质与offsetWidth相似，不过它计算的只是元素本身+padding的值，
clientHeight	作用同上
offsetLeft	返回元素的可见区域的边界距其父元素本身（即不考虑padding、margin、 border）的边界的左边偏移量，如果其父元素（或更高级的父元素）没有 相对或绝对定位属性，则会把body算作其父元素。使用此属性时最好把父 元素设成绝对或相对定位。另外，不管此元素是绝对定位还是静态定位都 适用于该属性
offsetTop	作用同上。没有offsetRight、offsetBottom的说法
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对象的好处在于可以减少浏览器回流，提高效率