(一)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(新节点,被替换节点) //替换元素