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:当浏览器窗口发生变化是触发