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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值