DOM操作

课后整理 2021-2-25

为了方便开发,网站中经常会获取相同类名的所有元素,同时在显示数据时可能需要获取当前行元素的具体坐标偏移位置,以便进行精确定位。因此这里为DOM扩展了几个功能辅助工具。

//===================================
//获取元素距离窗口左侧的偏移位置
//参数说明:element-元素对象,DOM对象
//返回值:返回距离的数值
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
//获取元素距离窗口顶部的偏移位置
//参数说明:element-元素对象,DOM对象
//返回值:返回距离的数值
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}
//===================================
//使用标准方法绑定事件
//参数说明:e-元素对象;event-事件类型,不要添加on前缀;fn-绑定的事件函数
var addEvent=function(e,event, fn) {
    if(document.addEventListener){
        return e.addEventListener(event, fn, false);
    }
    else if(document.attachEvent){
        return e.attachEvent("on"+event, fn);
    }
};
//===================================
//扩展Document对象的getElementsByClassName方法
//获取文档或指定对象内特定类型的对象
//参数说明:className-类名,字符串;dom-文档或文档内任何对象,DOM对象
//返回值:返回匹配类名的DOM对象的数据集合
document.getElementsByClassName = function(className,dom) { 
    var dom = dom || document;
    var el = [],
        _el = dom.getElementsByTagName('*');
    for (var i=0; i<_el.length; i++ ) {
       if (_el[i].className == className ) {
           el[el.length] = _el[i];
        }
   }
   return el;
}