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].nameoUl.attributes[0].value
oUl.attributes[0].nodeType
children跟 children区别是
标准浏览器下 只包含 元素类型节点+识别非法嵌套的标签
非标准下 只包含元素类型节点
======================================================================
firstChild firstElementChild
获取子元素里的第一个
lastChild lastElementChildfirstChild 同样的兼容性问题会识别 文本节点
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 offsetTopbug: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(节点, 已有节点) 替换节点