DOM

DOM（document object model）文档对象模型

文档：html页面

文档对象：页面中的元素

文档对象模型：定义--为了能够让程序（js）去操作页面中的元素

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

　　　　标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点

　　　　非标准下：只包含元素类型的节点，IE7以下，不会包含非法嵌套的子节点

　　　　childNode只包含一级子节点，不包含后背孙级以下的节点

    <script>
        window.onload=function () {
            var oUl=document.getElementById("ul1");
                alert(oUl.childNodes.length);
        }
    </script>

　　<ul id="ul1">
  　　  <li>1111</li>
  　　  <li>2222</li>
   　　 <li>3333</li>
  　　  <li>4444</li>
　　</ul>

上面例子中，在标准情况下长度出现9的结果是因为把<li>前后的回车换行符是文本类型节点，所以会加上一共9个节点。在非标准情况下，例如在IE6，7，8下，结果为4，只包含元素类型节点。

 　　元素.nodeType：只读 属性 当前元素的节点类型

　　　　DOM节点的类型有12种：9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点

　　元素.attributes：属性 属性列表集合

　　元素.children：只读 属性 子节点列表集合

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

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

　　元素.firstChild：只读 属性 第一个子节点

　　　　标准下：firstChild会包含文本类型的节点

　　　　非标准下：只包含元素节点

　　　　当要获取第一个元素类型节点，又可避免兼容性问题，可以使用---元素.children[0]来搭配获取。

　　元素.firstElementChild：只读 属性

　　　　标准下：获取第一个元素类型的子节点

　　　　非标准下：不支持这个属性

　　  元素.lastElementChild||元素.lastChild 最后一个子节点

　　 元素.nextElementSibling||元素.nextSibling 下一个兄弟节点

　　 元素.previousElementSibling ||元素.previousSibling 上一个兄弟节点

　　元素.parentNode:只读 属性 当前节点的父级节点

　　　　无兼容性问题

　　元素.offsetParent：只读 属性 离当前元素最近的有一个有定位属性的父节点 

　　　　如果没有定位父级，默认值body

　　　　IE7以下，如果当前元素没有定位默认是body，如果有定位则是html。如果当前元素的某个父级触发了layout，那么offsetParents就会指向到这个触发layout特性的父节点上

　　　元素.offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）

　　　　　　到当前元素的offsetParent的距离

　　　　　　如果没有定位父级：offsetParent->body     offsetLeft->html

　　　　　　如果有定位父级 ：    IE7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离 

　　　　　　　　　　　　　　　　其他：到定位父级距离

---

 　　DOM-如何获取某个元素到顶部的距离

　　方法核心就是利用offsetparent 与offsetTop值的特性，都是取的是定位元素。offsetParent取的是离自己最近的定位父级，没有定位父级取body。同样offsetTop也是得到的是离自己最近的定位父级的距离，没有定位父级得到的是到body的距离。在ie7以下，两者也相同，offsetParent取的是html,offsetTop得到的是到html的距离。

var iTop=0;
var obj=该元素；
while(obj){
   iTop+=obj.offsetTop;
   obj=obj.offsetParent;    
}
alert(iTop);//该元素到顶部的距离

//body的offsetParent为null，html的offsetParent为null

//body的offsetTop为0，html的offsetTop为0

---

 

• 　　创建元素：document.createElement(标签名称)；

　　　例：　var createLi=document.createElement('li');

• 　  添加到页面中：

　　　　父级.appendChild()方法   追加子元素(在父级元素的最后一个子节点后面添加)

　　　　　 例：oUl.appendChild(createLi);

　　　　父级.insertBefore(新的元素，被插入的元素) 方法  在指定元素前面插入一个新元素，

　　　　注意：

　　　　　　在ie下如果第二个参数的节点不存在，会报错。

　　　　　　在其他浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加。

　　　　　　解决办法：

　　　　　　　　if（父级.children[0]）{

　　　　　　             父级.insertBefore(新的元素，父级.children[0]);

　　　　　　　　}else{

　　　　　　　　　　父级.appendChild(新元素);

　　　　　　　　}

　　　　     例：oUl.insertBefore(oLi,oUl.children[0]);//一直插入到第一位

• 　　 删除元素：　父级.removeChild(要删除的元素)；　　
• 　   替换子节点：父级.replaceChild(新节点，被替换的节点);　　类似于剪切元素，新节点在原来的位置上已经不存在，移动到替换的节点那里。

　　appendChild,insertBefore,replaceChild都可以操作动态创建出来的元素节点，也可以操作已有元素节点