码迷,mamicode.com
首页 > 其他好文 > 详细

DOM相关操作

时间:2016-07-07 19:34:56      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:

(一)childNodes兼容性问题较多

1、元素节点:1

2、文本节点:3

3、属性节点:2

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

    标准下:包含了文本和元素类型的节点,并且也会包含非法嵌套的子节点

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

    childNodes只包含一级子节点,不包含后辈节点

 

DOM节点的类型有很多种  12种

 

元素.nodeType:只读  属性  当前元素的节点类型

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

(二)children

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

    标准下:只包含元素类型的节点

    非标准下:只包含元素类型的节点

元素.fristChild:只读  属性  第一个子节点

    标准下:firstChild会包含文本年类型的节点

    非标准下:只包含元素节点

元素.firstElementChild:只读  属性  标准下获取第一个元素类型的子节点

元素.lastChild||元素.lastElementChild 最后一个子节点

元素.nextSibling||元素.nextElementSibling下一个兄弟节点

元素.previousSibling||元素.previousElementSibling上一个兄弟节点

(三)父节点操作

元素.parentNode:只读 属性  当前节点的父级节点——没有兼容问题

元素.offsetParent:只读  属性  离当前元素最近的有定位的父节点;

               如果没有定位父级,默认是body

               ie7以下,如果当前元素没有定位,默认是body;如果有定位,则是HTML

               ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点

元素.offsetLeft:只读  属性  当前元素到定位父级的距离(偏移值)/(到当前元素的offsetParent的距离)

             如果没有定位父级,

               offsetParent指向body

               offsetLeft指向html

                                    如果有定位父级

                                   ie7下:如果自己没有定位,那么offsetLeft(Top)是到body的距离

                                          其他:到定位父级的距离

(四)节点宽度操作

1、style.width:样式宽               //100

2、clientWidth:可视宽              //样式宽+padding

3、offsetWidth:占位宽             //样式宽+padding+border

(五)创建节点操作

document.createElement(标签名称)                         //创建元素

父级.appendChild(要添加的元素)方法                         //追加子元素:

父级.insertBefore (新的元素,被插入的元素)                //在指定的某个元素前面插入一个新元素

    在IE下如果第二个参数的节点不存在,会报错

    在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式替代

父级.removerChild(要删除的元素);                           //删除元素

父级.replaceChild(新节点,被替换节点)                         //替换元素

 

DOM相关操作

标签:

原文地址:http://www.cnblogs.com/BetterMyself/p/5651012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!