一、元素.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都可以操作动态创建出来的节点,也可以操作已有节点