【前端学习笔记】深入学习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 : 只读 属性 标准下获取第一个元素类型的子节点 只支持标准下

[code]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);

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

[code]    width height
    style.width : 样式宽
    clientWidth : 可视区宽
    offsetWidth : 占位宽

alert( oDiv.style.width );  //100px
alert( 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下还是会返回资源的绝对路径。\

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

[code]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都可以操作动态创建出来的节点，也可以操作已有节点