window.utils = {
/关于DOM操作js开始/
/**
* 定义一个获取元素的方法
* @param param
* @returns {*}
*/
$$: function(param) {
if ((typeof param).toUpperCase() == "STRING") {
var fparam = param.charAt(0); //获取第一位
if (fparam == "#") {
return document.getElementById(param.substring(1));
} else if (fparam == ".") {
var param = param.substring(1);
if (document.getElementsByName) {
return document.getElementsByClassName(param);
} else {
var all = document.getElementsByTagName("*");
var allClass = [];
for (var i = 0; i < all.length; i++) {
var arr = all[i].className.split(" ");
for (var j = 0; j < arr.length; j++) {
if (arr[j] == param) {
allClass.push(arr[j]);
}
}
}
return allClass;
}
} else {
return document.getElementsByName(param);
}
}
},
/**
* 获取class类名,注意返回的是一个数组,需要写上下标
* @param className
* @param parent
* @returns {*}
*/
getClassName: function(className, parent) {
var parent = parent || document;
if (parent.getElementsByClassName) {
return parent.getElementsByClassName(className);
}
var all = parent.getElementsByTagName("*");
var allClass = [];
for (var i = 0; i < all.length; i++) {
var arr = all[i].className.split(" ");
for (var j = 0; j < arr.length; j++) {
if (arr[j] == className) {
allClass.push(all[i]);
}
}
};
return allClass;
},
/**
* 获取id的方法
* @param id
* @returns {Element}
*/
getId: function(id) {
return document.getElementById(id);
},
/**
* 获取元素样式方法
* @param obj:对象
* @param attr:获取样式名称,注意复合属性获取不到
* @returns {*}
*/
getStyle: function(obj, attr) {
attr = attr.trim(); //去除前后空格,以防万一
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
};
},
/**
* 设置元素样式
* @param obj
* @param json:传递的是一个json对象
*/
setStyle: function(obj, json) {
for (var key in json) {
obj.style[key] = json[key];
};
},
/**
* 获取第一个节点元素
* @param parent:父节点元素
* @returns {*}
*/
firstChild: function(parent) {
if (parent.firstElementChild) {
return parent.firstElementChild;
} else {
return parent.firstChild;
};
},
/**
* 获取最后一个元素节点的方法
* @param parent:父节点
* @returns {*}
*/
lastChild: function(parent) {
if (parent.lastElementChild) {
return parent.lastElementChild;
} else {
return parent.lastChild;
};
},
/**
* 获取下一个元素节点
* @param obj
* @returns {*}
*/
next: function(obj) {
if (this.lastChild(this.parent(obj)) != obj) {
if (obj.nextElementSibling) {
return obj.nextElementSibling;
} else {
return obj.nextSibling;
};
} else {
return obj;
};
},
/**
* 获取元素的上一个节点
* @param obj
* @returns {*}
*/
prev: function(obj) {
if (this.firstChild(this.parent(obj)) != obj) {
if (obj.previousElementSibling) {
return obj.previousElementSibling;
} else {
return obj.previousSibling;
};
} else {
return obj;
};
},
/**
* 获取元素的父节点
* @param obj
* @returns {*}
*/
parent: function(obj) {
if (obj.parentNode) {
return obj.parentNode;
} else {
return obj;
};
},
/**
* 获取兄弟节点
* @param obj:获取对象的一个
* @param callback:可选的参数
* @returns {Array}
*/
siblings: function(obj, callback) {
var result = [];
var parent = this.parent(obj);
var all = parent.children;
for (var i = 0; i < all.length; i++) {
if (all[i] != obj) {
result.push(all[i]);
callback && callback.call(all[i]);
}
};
return result;
},
/**
* 获取一个元素的距离文档的位置,类似jQ中的offset()
* @param obj
* @returns {{left: number, top: number}}
*/
offset: function(obj) {
var pos = { left: 0, top: 0 };
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
};
return pos;
},
/**
* 获取与设置元素自定义属性,可以接收2个或者3个参数
* 2个参数的时候是获取自定义属性,3个参数是设置自定义属性
* @returns {*|string|String}
*/
attr: function() {
if (arguments.length < 2 || typeof arguments[0] != "object" || arguments.length > 3) {
return;
};
//如果存在第二个参数的时候,就是设置自定义属性
if (arguments[2]) {
return arguments[0].setAttribute(arguments[1], arguments[2]);
} else {
return arguments[0].getAttribute(arguments[1]);
};
},
/**
* 删除自定义属性
* @param obj
* @param attr
* @returns {*}
*/
removeAttr: function(obj, attr) {
return obj.removeAttribute(attr);
},
/**
* 定义一个绑定事件的方法
* @param obj 绑定对象
* @param event 事件方法
* @param callback 执行函数
*/
bind: function(obj, event, callback) {
if (obj.addEventListener) {
obj.addEventListener(event, callback, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + event, callback);
} else {
obj["on" + event] = callback;
};
},
/**
* 封装一个事件绑定的方法
* @param dom
* @param eventType
* @param eventElement
* @param calback
*/
on: function(dom, eventType, eventElement, calback) {
dom.addEventListener(eventType, function(ev) {
if (ev.target.tagName.toLowerCase() == eventElement) {
//执行的方法要操作的对象的当前目标对象,所以用call去改变指向
calback.call(ev.target, ev.target);
};
}, false);
},
/**
* 获取滚动条的高度
* @returns {Number|number}
*/
scrollTop: function() {
return document.documentElement.scrollTop || document.body.scrollTop;
},
/**
* 添加样式
* @param obj
* @param className
*/
addClass: function(obj, className) {
if (obj.className == "") {
obj.className += className
} else {
var arrClass = obj.className.split(" ");
var index = classIndex(arrClass, className);
if (index == -1) {
arrClass.push(className);
obj.className = arrClass.join(" ")
}
console.log(arrClass)
}
},
/**
* 删除样式
* @param obj
* @param className
*/
removeClass: function(obj, className) {
var arrClass = obj.className.split(" ");
var index = classIndex(arrClass, className);
if (index != -1) {
arrClass.splice(index, 1)
obj.className = arrClass.join(" ")
}
},
/**
* 获取鼠标的位置
* @param {Object} event
*/
tm_posXY: function(event) {
event = event || window.event;
var posX = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var posY = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return {
x: posX,
y: posY
};
},
/**
* 获取窗体可见度高度
*/
getClientHeight: function() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
return clientHeight;
},
/**
* 获取窗体可见度宽度
*/
getClientWidth: function() {
var clientWidth = 0;
if (document.body.clientWidth && document.documentElement.clientWidth) {
clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
} else {
clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
}
return clientWidth;
},
/**
* 获取滚动条的高度
*/
getScrollHeight: function() {
return Math.max(getClientHeight(), document.body.scrollHeight,
document.documentElement.scrollHeight);
},
/**
* 获取到滚动条顶部的距离
*/
getScrollTop: function() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
/关于DOM操作js结束/
}
关于封装部分DOM操作的方法
最新推荐文章于 2021-12-27 19:17:00 发布