zoukankan      html  css  js  c++  java
  • DOM相关属性,方法,兼容性问题处理小析

    DOM:Document Object Model文档对象模型,用于让程序(js)取操作页面中的元素。DOM节点类型有12种。

    (一)属性

    一、子节点操作
    1.所有子节点
    (1)元素.childNodes ==>只读,元素子节点列表集合(只包含一级子节点,不包含后辈孙级以下节点)
    标准浏览器:包含了文本和元素类型节点,也会包含非法嵌套的子节点。
    非标准浏览器:只包含元素类型节点,IE7以下不包含非法嵌套的子节点。
    兼容处理:由于文本节点无背景等样式,故在设置样式前用.nodeType判断节点类型。
    元素.nodeType得到节点的类型:
    1--元素节点;
    2--属性节点;
    3--文本节点;
    元素.attributes ==>只读,获取元素属性名,返回属性列表集合
    元素.attributes[n].name ==>得到对应的属性值
    (2)元素.children ==>只读,子节点列表集合
    标准浏览器下和非标准浏览器下都只包含元素类型的节点,把非法嵌套的标签设置为孙节点。
    因此,获取子节点多采取这种方式。
    2.第一个子节点
    (1)元素.firstChild ==>只读,元素的第一个子节点
    标准浏览器:会包含文本类型节点
    非标准浏览器:只包含元素类型节点
    (2)元素.firstElementChild ==>只读,第一个子节点
    标准浏览器:获取第一个元素类型的子节点
    非标准浏览器:无此属性
    兼容处理:var Ofirst=元素.firstElementChild||元素.firstChild(当元素下无子节点时,此处理方式有问题,会得到

    元素下的文本节点,故尽量采用此法:元素.children[0].style.background='red')
    3.最后一个子节点
    元素.lastChild
    元素.lastElementChild
    兼容性问题及处理同第一个子节点方式

    二、兄弟节点操作
    1.元素的下一个兄弟节点
    元素.nextSibling
    元素.nextElementSibling
    兼容性问题及处理同第一个子节点方式
    2.元素的上一个兄弟节点
    元素.previousSibling
    元素.previousElementSibling
    兼容性问题及处理同第一个子节点方式

    三、父节点操作
    1.元素.parentNode ==>只读,当前元素的父节点(无兼容性问题)
    2.元素.offsetParent ==>只读,离当前元素最近的一个有定位属性的父节点;如果没有定位的父级,默认为body;IE7以

    下,如果当前元素有定位则父节点是HTML;IE7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被

    指向到这个触发了layout特性的父节点上。
    3.元素.offsetLeft(offsetTop) ==>只读,当前元素到定位父级的偏移值
    当有定位父级时:
    IE7及以下:
    (1)如果自己无定位,那么该属性是到body的距离
    (2)如果自己有定位,那么就是到定位父级的距离
    其他浏览器:到定位父级的距离
    当父级无定位时:
    offsetParent:body
    offsetLeft,offsetTop:html

    四、宽高属性
    元素.style.width/height ==>元素的样式宽/高
    元素.style.clientWidth/Height ==>元素的可视宽/高=样式宽/高+padding
    元素.style.offsetWidth/Height ==>元素的占位宽/高=样式宽/高+padding+border

    获取元素绝对位置封装函数:因为不知道该元素的父级是否有定位。
    function getPos(obj){
       var pos={left:0;top:0};
       while(obj){
          pos.left+=obj.offsetLeft;
          pos.top+=obj.offsetTop;
          obj=obj.offsetParent;
              }
          return pos;
    }


    (二)方法

    一、动态创建子节点
    document.createElement('元素名称') ==>创建元素,还不存在页面里
    将元素添加到页面中:
    (1)父级.appendChild('要添加的元素')
    (2)父级.insertBefort('要添加的元素','被插入的元素') ==>在指定元素前插入一个新元素

    二、删除子节点
    父级.remove('要删除的子节点')

    三、替换子节点
    被替换的节点父级.replace('新节点','被替换的节点')

    总结:appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已经存在的节点。

  • 相关阅读:
    Centos 6 安装python2.7.6
    更新centos系统的python版本
    centos中wget的使用方法
    开启apahce的mod_speling.so模块,让使用apahce http服务器不再有大小写烦恼
    开启server-status失败
    TCP三次握手与四次挥手
    GitHub入门和项目托管
    使用javac,手动编译一个java文件的方法
    《TomCat与Java Web开发技术详解》(第二版) 第四章节的学习总结--常用Servlet API
    《TomCat与Java Web开发技术详解》(第二版) 第三章节的学习总结--利用Context元素来自定义web应用的存储位置
  • 原文地址:https://www.cnblogs.com/fengxiaopiaoer/p/5629896.html
Copyright © 2011-2022 走看看