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都可以操作动态创建出来的元素节点,也可以操作已有元素节点

 

posted @ 2016-07-24 11:44  Heroine.z  阅读(192)  评论(0编辑  收藏  举报