DOM基础概念和操作

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

DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点)
DOM节点的类型有12种
getElementById getElementByTagName document document.body

2 DOM属性
元素.childNodes : 只读 属性 子节点列表集合
标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点
非标准下:只包含元素类型的节点,ie7以下不会包含非法嵌套子节点
childNodes只包含一级子节点,不包含后辈孙级以下的节点
DOM节点的类型有很多种 12种
元素.nodeType : 只读 属性 当前元素的节点类型
元素节点:1 属性节点:2 文本节点 :3
alert( oUl.childNodes.length ); alert( oUl.nodeType ); alert(oUl.childNodes[0].nodeType);
属性
元素.attributes : 只读 属性 属性列表集合
//alert( oUl.attributes.length );
//alert( oUl.attributes[0].nodeType );
for (var i=0; i<oUl.childNodes.length; i++) {
if ( oUl.childNodes[i].nodeType == 1 ) {
oUl.childNodes[i].style.background = ‘red’;
}

元素.children : 只读 属性 子节点列表集合
标准下:只包含元素类型的节点
非标准下:只包含元素类型的节点
eg
//alert( oUl.children.length );
for (var i=0; i<oUl.children.length; i++) {
oUl.children[i].style.background = ‘red’; }

元素.firstChild : 只读 属性 第一个子节点
标准下:firstChild会包含文本类型的节点
非标准下:只包含元素节点
元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点
eg :
//alert( oUl.firstChild );
//alert( oUl.firstElementChild );
/if ( oUl.firstElementChild ) {
oUl.firstElementChild.style.background = ‘red’;
} else {
oUl.firstChild.style.background = ‘red’;
}
/
or
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = ‘red’;

元素.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’;

元素.parentNode : 只读 属性 当前节点的父级节点
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
如果没有定位父级,默认是body
ie7以下,如果当前元素没有定位默认是body,如果有定位则是html
ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上
//layout
alert( document.getElementById(‘div2’).currentStyle.hasLayout );
alert( oDiv3.offsetParent.id );

父级.replaceChild(新节点,被替换节点) 替换子节点
document.body.replaceChild( oDiv, oP );
appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已有节点
oP.appendChild( oDiv );
document.createElement(标签名称); 创建元素
var oLi = document.createElement(‘li’);
oLi.innerHTML = oText.value + ‘<a href=”javascript:;”>删除</a>’;
oLi.innerHTML = oText.value;
var oA = document.createElement(‘a’);
oA.innerHTML = ‘删除’;
oA.href = ‘javascript:;’;
oA.onclick = function() {
父级.removeChild(要删除的元素); 删除元素
oUl.removeChild( this.parentNode );
}

    oLi.appendChild( oA );

添加到页面中:父级.appendChild(要添加的元素) 方法 追加子元素
父级.insertBefore(新的元素,被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在,会报错
在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式进行添加
eg:
oUl.insertBefore( oLi, oUl.children[0] );
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}

元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离(偏移值)到当前元素的offsetParent的距离
如果没有定位父级 offsetParent -> body offsetLeft -> html
如果有定位父级
ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
如果自己有定位,那么就是到定位父级的距离
其他:到定位父级的距离

3 width height
style.width : 样式宽 clientWidth : 可视区宽 offsetWidth: 占位宽
alert( oDiv.style.width ); //
alert( oDiv.clientWidth ); //样式宽 + padding
alert( oDiv.offsetWidth ); //样式宽 + padding + border 可视区宽 + 边框
4 操作元素属性的多种方式
oText.value = ‘222’; alert( oText.value );
oText[‘value’] = ‘222’; alert( oText[‘value’] );
var name = ‘value’;
//oText.name; 有问题
//oText[name]; OK
元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
alert( oText.getAttribute(‘value’) );
元素.setAttribute(属性名称,属性值); 方法 给指定元素指定的属性设置值
oText.setAttribute( ‘value’, ‘hello’ );
元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
oText.removeAttribute( ‘value’ );
PS
1.用.和[]的形式无法操作元素的自定义属性,getAttribute可以操作元素的自定义属性
alert( oText.name ); alert( oText[‘_name_’] ); //有问题
alert( oText.getAttribute(‘name‘) ); //ok

var oImg = document.getElementById(‘img1’);
2.可以获取元素属性实际的值 ie7下还是会返回资源的绝对路径
//alert( oImg.src ); //alert( oImg[‘src’] );
//alert( oImg.getAttribute(‘src’) );
//alert( oImg.style.getAttribute(‘width’) );

IT文库 » DOM基础概念和操作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址