【前端学习笔记】深入学习Javascript:DOM机制

DOM概念———————————————————————————–
DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点

getElementById
getElementByTagName
document
document.body

childNode属性————————————————————————–
元素.childNodes : 只读 属性 子节点列表集合

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

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

兼容性问题比较多，不建议使用

nodeType属性————————————————————————–
DOM节点的类型有很多种 12种

元素.nodeType : 只读 属性 当前元素的节点类型
nodeType的值：
元素节点 : 1
属性节点 : 2
文本节点 : 3

attributes属性————————————————————————–
元素.attributes : 只读 属性 属性列表集合

children属性—————————————————————————
元素.children : 只读 属性 子节点列表集合

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

firstChild/lastChild/nextSibling/previousSibling属性————————————————–
元素.firstChild : 只读 属性 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点 只支持标准下

var oFirst = oUl.firstElementChild || oUl.firstChild;oFirst.style.background = 'red';//问题：当oUl里只有一个文本元素而没有节点元素的时候,oUl.firstChild返回文本类型节点，而文本类型节点不能设置style，以下属性也有这个问题/*    元素.lastChild || 元素.lastElementChild 最后一个子节点*/var oLast = oUl.lastElementChild || oUl.lastChild;oLast.style.background = 'yellow';/*    元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点*/var oNext = oFirst.nextElementSibling || oFirst.nextSibling;oNext.style.background = 'blue';/*    元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点*/var oPrev = oLast.previousElementSibling || oLast.previousSibling;oPrev.style.background = 'orange';

parent节点读取方法————————————————————————————-
元素.parentNode : 只读 属性 当前节点的父级节点 兼容性很好

元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
该属性判断父级的几个点：
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
Layout是ie7以下特性
是否有Layout特性 ：doucument.getElementById(”).currentStyle.hasLayout; true:有 false:没有
alert( document.getElementById(‘div2’).currentStyle.hasLayout );

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

当前选择的元素
如果没有定位父级
本身没有定位：offsetLeft -> body
本身有定位的话：offsetLeft -> html(ie7)

如果有定位父级
ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离
其他：到定位父级的距离

无论外层有没有定位，判断所选元素到body的距离：
原理，从本元素到有定位的父级，再到下一个有定位的父级，直至body，循环计算offsetTop[Left]值，总和就是本元素到body的值
var iTop = 0;
var obj = oDiv3;
while (obj) {
//alert( obj.id + ’ : ’ + obj.offsetTop );
iTop += obj.offsetTop;
obj = obj.offsetParent;
//alert(obj + ’ : ’ + obj.id);
}

封装成函数：

function getPos(obj)
{
var pos={left:0,top:0};
while(obj)
{
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj=obj.offsetParent;
}
return pos;

}
alert(getPos(oDiv3).left);

元素宽高———————————————————————————————–

    width height    style.width : 样式宽    clientWidth : 可视区宽    offsetWidth : 占位宽alert( oDiv.style.width );  //100pxalert( oDiv.clientWidth );  //样式宽 + padding alert( oDiv.offsetWidth );  //样式宽 + padding + border  可视区宽 + 边框 

操作元素属性的三种方式——————————————————————————-

1 obj.属性
2 obj[属性] //用于属性为变量时
3 obj.getAttribute(‘属性’) 、obj.setAttribute(‘属性’)、obj.removeAttribute(‘属性’);

三种方式区别
1.用.和[]的形式无法操作元素的自定义属性，getAttribute可以操作元素的自定义属性。
2.可以获取元素属性实际的值，比如img.getAttribute(‘src’); 但是ie7下还是会返回资源的绝对路径。\

动态元素创建—————————————————————————————–

document.createElement(标签名称); 创建元素父级.removeChild(要删除的元素); 删除元素父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素    在ie下如果第二个参数的节点不存在，会报错    在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加    所以如果要用insertBefore()方法，最好用以下兼容操作    if ( oUl.children[0] ) {        oUl.insertBefore( oLi, oUl.children[0] );    } else {        oUl.appendChild( oLi );    }父级.replaceChild(新节点，被替换节点) 替换子节点    这个新节点如果是页面已有的节点，会被剪切至被替换节点位置总结：appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点