JavaScript中的DOM
DOM:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
1. childNodes(不兼容)/children:属性返回节点的子节点集合,以 NodeList 对象(子节点列表) ,
2.nodeType:
1.为元素节点
2.属性attr
3.文本text
8.注释comments
9.文档document
3.attributes:属性返回指定节点的属性集合,即 NamedNodeMap。
4.firstChild / firstElementChild(有兼容性问题):第一个子元素节点
兼容处理:var oFirst=父元素.firstElementChild || 父元素.firstChild (不加以使用)
5.listChild / listElementChild(有兼容性问题):最后一个子元素节点
兼容处理:var oList=父元素.listElementChild|| 父元素.listChild (不加以使用)
6.nextSibling /nextElementSibling 兄弟节点(下一个节点)
7.previousSibling /previousElementSibling 兄弟节点(上一个节点)
8.parentNode(无兼容性问题):父级节点
9.offsetParent(1. IE7以下有兼容性问题,如果当前元素有定位,则选择的是html元素 2. ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上):距离当前元素最近的有定位的父节点。
10.offsetLeft:只读 属性 当前元素到定位父级的距离(偏移值)到当前元素的offsetParent的距离 ie7以下body的默认margin-left , margin-right 是10px,标准浏览器下是8px, 默认的margin-top是15px 但是在标准下是8px
ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
如果自己有定位,那么就是到定位父级的距离
其他:到定位父级的距离
11.offsetTop:
12.clientWidth:可视区宽度()
13.offsetWidth:可视区宽度+边框
14.removeChild:删除元素 语法:父级.removeChild(要删除的元素);
15.replaceChild:替换子节点 语法:父级.replaceChild(新节点,被替换节点)
16.createElement:创建元素 语法:document.createElement(标签名称);
17.appendChild():方法向节点添加最后一个子节点。
18.clientWidth:可视区的宽度
19.clientHeight:可视区高度
20.scrollTop:滚动条距离
21.scrollTop:滚动条距离
兼容性处理:var scrollTop= document.documentElement.scrollTop || document.body.scrollTop
22.scrollHeight:内容高
23.scrollWidth:内容宽
24.offsetHeight:文档的高度 ie:和可视区的高度一样
25.onscroll:当滚动条滚动时触发
26.onresize:当浏览器窗口发生变化是触发