DOM整理

一。对DOM的理解

1.DOM就是获得对 HTML文档中所有元素进行访问的入口。这是表示和处理一个HTML或XML文档的常用方法。HTML DOM 定义了所有 HTML元素的对象和属性，以及访问它们的方法。

2.DOM是一个宿主对象，对象就有属性和方法。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。eg：getElementById()等等。

属性是您能够获取或设置的值（比如节点的名称或内容）。eg：常用的是innerHTML和innerText获取元素的内容

3.DOM树节点之间的关系：父（parent）、子（child）和同胞（sibling）

二。通过 JavaScript，您可以重构整个HTML 文档。即可以添加、移除、改变或重排页面上的项目。

包括：

1.JavaScript 能够改变页面中的所有HTML 元素

（包括添加、删除节点等的方法）

// 创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性

2.JavaScript 能够改变页面中的所有HTML 属性 

（用innerHTML或innerText获取元素的内容。获取属性的方法-getAttribute()、setAttribute()、removeAttribute()。定位属性offsetLeft/offsetTop 、offsetParent。）

定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素）。而offsetLeft/offsetTop就是到定位父级的距离

3.JavaScript 能够改变页面中的所有 CSS 样式  

（DOM操作样式；样式相关的宽高：样式宽高、可视宽高、占位宽高。）

DOM操作样式的方式有三种：

第一种(操作元素的style样式属性,也就是操作内联式)

第二种操作外联和内嵌样式用css规则

 var oCSSRules=document.styleSheets[0].cssRules(DOM浏览器) || document.styleSheets[0].rules(IE浏览器);

 alert(oCSSRules[0].style.background)

第三种(操作最终样式,最终样式就是最后显示在屏幕的样式，只能读取样式，不能修改）

IE浏览器:

var oDiv=document.getElementById("div");

Alert(oDiv.currentStyle.backgroundColor);

DOM浏览器:

var oDiv=document.getElementById("div");

Alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);

 

样式相关的宽高：样式宽高、可视宽高、占位宽高。

样式宽高.style.width，只能获取行间样式（即内联样式）的宽。

可视宽高：clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。等于padding+width

占位宽高：offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width。它包滚动条等边线，会随窗口的显示大小改变

4.JavaScript能够对页面中的所有事件做出反应 

见《JavaScript事件》一文（http://blog.csdn.net/sinat_27346451/article/details/65627444）