DOM概念

一、元素.childNodes: 只读 属性 子节点列表集合×有兼容性的问题

标准下： 包含了文本和元素类型的节点，也包含非法嵌套的子节点

非标准下：  只包含了元素类型的节点，IE7以下不会包含非法嵌套的子节点

childNodes只包含一级子节点，不包含后辈孙级以下的节点

DOM节点的类型一共有12种

元素.nodeType：只读属性 当前元素的节点类型

元素节点 ： 1

属性节点 ： 2

文本节点 ： 3

元素.attributes ：只读 属性 属性列表集合

alert(xxx.attributes.length);

alert(xxx.attributes[].nodeType);

二、元素.children： 只读 属性  子节点列表集合√  推荐使用

标准下： 包含元素类型的节点

非标准下：包含元素类型的节点

三、元素.firstChild： 只读  属性  第一个子节点×有兼容性问题

标准下：firstChild包含文本类型的节点

非标准下：firstChild只包含元素节点

元素.firstElementChild：只读  属性  标准下获取第一个元素类型的子节点

var aFirst = xxx.firstElementChild || xxx.firstChild;

元素.lastChild|| 元素.lastElementChild获取最后一个元素类型的子节点

四、元素.nextSibling  ||  元素.nextElementSibling 获取下一个兄弟节点

var aNext = aFirst.nextElementSibling || aFirst.nextSibling;

五、元素.previousSibling  ||  元素.previousElementSibling上一个兄弟节点

var aPrev = aLast.previousElementSibling || aLast.previousSibling;

六、元素.parentNode： 只读   属性当前节点的父级节点√没有兼容问题

七、元素.offsetParent：  只读   属性 离当前元素最近一个有定位的父级节点

如果没有定位父级节点，默认的是body

IE7以下，如果当前元素没有定位默认是body，如果有定位则是html

八、元素.offsetLeft[Top]：只读   属性   当前元素到定位父级的距离（偏移值）

 取值：到当前元素的offsetParent的距离

九、元素.clientWidth[Height]：可视区的宽度（样式宽+padding） 不带单位

元素.offsetWidth[Height]： 占位宽（样式宽+padding+border）不带单位

//当前元素获取到页面顶部的距离

var iTop = 0,

      obj   = 元素节点（div）;

while(obj){

iTop += obj.offsetTop;

obj = obj.offsetParent;

}

console.log(iTop);

//封装

var p = getPos(div);

function getPos(obj){

var pos = {left:0, top:0};

while(obj){

pos.left += obj.offsetLeft;

pos.top += obj.offsetTop;

obj = obj.offsetParent;

}

return pos;

}

十、元素动态创建 1).var oLi = document.createElement(标签名称);

2).oLi.innerHTML = oText.vale;

3).oUl.appendChild(oLi);

父级.insertBefore(新元素,被插入的元素) 方法 在指定元素前面插入一个新元素.

在IE下如果第二个参数的节点不存在，会报错

在标准下会以appendChild的形式进行添加

if(oUl.children[0]){

oUl.insertBefore(oLi,oUl.children[0]);

}else{

oUl.appendChild(oLi);

}

十一、元素动态删除   父级.removeChild(要删除的元素);

var oA = document.createElement('a');

oA.innerHTML = '删除';

oA.href = 'javascript:;';

oA.onclick = function (){

oUl.removeChild(this.parentNode);

}

十二、元素替换节点   父级.replaceChild(新节点,被替换节点)

appendChild，insertBefore，replaceChild都可以操作动态创建出来的节点，也可以操作已有节点