Dom学习笔记

DOM

document object model  文档 对象  模型

 

文档：html页面

文档对象：页面中的元素

文档对象模型: 文档对象模型是w3c

为了能够让js去操作页面中的元素，定义的一套标准

DOM会把当前文档看作一棵树 树种的每一个元素就是文档树 的一个节点

同时定义了很多方法 来操作每一个元素

每个方法又有各自的属性

 

DOM基础

childNodes 【兼容性问题不推荐使用用children代替】

是属性不加括号  他前面有一个对象调用要加上他的对象

只包含子级一级节点 不包含孙级一下

非法嵌套也会 包含在总数里

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

dom节点 有十二种

元素节点 nodeType  1

文本节点 nodeType 3

属性节点 nodeType 2

有兼容性问题  

标准浏览器  有文本+元素节点 换行符是文本节点

非标准 只是元素节点 

nodeType属性

当前元素的节点类型

 

获取元素属性列表集合 【只读】

元素.attributes  获取  style  id class等
oUl.attributes[0].name

oUl.attributes[0].value

oUl.attributes[0].nodeType

children跟 children区别是

标准浏览器下 只包含 元素类型节点+识别非法嵌套的标签

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

======================================================================

firstChild \ firstElementChild
获取子元素里的第一个
lastChild \ lastElementChild

firstChild 同样的兼容性问题会识别 文本节点

firstElementChild【只读】/IE6不支持/不会识别文本/

兼容方案:

var oFirst=oUl.firstElementChild ||oUl.firstChild

oFirst.style.background=’red’

标准浏览器会返回空  空就是flase  就是第二种方法 给文本节点 设计样式就报错

所以用子元素的第0个比较靠谱点

上面的 都有这个兼容性问题

======================================================================

获取子元素里的最后一个nextSibling \ nextElementSibling
获取指定元素的下一个兄弟节点
previousSibling \ previousElementSibling
获取指定元素的上一个兄弟节点

没有节点的话也会出兼容性问题

======================================================================

 

parentNode【只读】 就是当前节点父级节点
获取父节点，点击链接隐藏整个li

parentNode&offsetParent区别

元素.offsetparent 只读 属性 父节点

offsetparent 会变  有定位的父节点  多个就是  离着当前元素有定位属性的的父节点

bug: ie6。7如果没定位父级。默认body。如果有定位则html  如果当前元素的某个父级元素

触发 了hashlouyt  则offsetparent会把父级元素指向触发元素

 

 

元素位宽高

只读 属性 当前元素到父级（offsetparent）的距离  偏移值

offsetLeft \ offsetTop

bug:ie7以下

如果自己没有定位

offsetLeft \ offsetTop 是body的距离

当前元素有定位

就正常获取

-------------

当前元素有定位

但是没有定位父级

offsetparent – >body

offsetparent –>html 

offsetLeft  默认margin是10像素  标准是8

offsetTop 是15像素 

offsetWidth \ clientWidth

 

 

 

 

 

 

 

 

 

 

操作元素属性的第三种方式

有兼容性问题，标准下不能获取两层
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
第三种方式的好处：自定义属性、相对网址

创建和插入元素

创建DOM元素
createElement(标签名)        创建一个节点
appendChild(节点)            追加一个节点
例子：留言板插入内容
插入元素
insertBefore(节点, 原有节点)    在已有元素前插入
例子：倒序留言板插入内容

删除和替换元素

删除DOM元素
removeChild(节点)        删除一个节点
例子：删除留言
替换DOM元素
replaceChild(节点, 已有节点)    替换节点