为了方便开发,网站中经常会获取相同类名的所有元素,同时在显示数据时可能需要获取当前行元素的具体坐标偏移位置,以便进行精确定位。因此这里为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; }