版权声明：zf版权所有 https://blog.csdn.net/u014381542/article/details/89028926
/**
* ========================DOM操作========================
*/
var domUtil = {
/**
* 获取window窗口的宽度
* @returns {number}
*/
"getWindowsW" : function(){
return document.documentElement.clientWidth || document.body.clientWidth;
},
/**
* 获取window窗口的高度
* @returns {number}
*/
"getWindowsH" : function(){
return document.documentElement.clientHeight || document.body.clientHeight;
},
/**
* 自动触发elem元素的eventType事件
* @param elem
* @param eventType
*/
"trigger" : function(elem,eventType){
var e = document.createEvent("HTMLEvents");
e.initEvent(eventType,true,true);
e.eventType = eventType;
elem.dispatchEvent(e);
//jQuery自动触发事件：
// $(elem).trigger(evenType);
},
/**
* 获取元素属性值
* @param elem
* @param attr
* @returns {string}
*/
"getAttr" : function(elem,attr){
return elem.getAttribute(attr);
},
/**
* 设置元素属性值，可传入对象
* @param elem
* @param attr
* @param attrVal
*/
"setAttr" : function(elem,attr,attrVal){
console.log(typeof(attr))
console.log(attr instanceof Object)
if (typeof(attr) == "object") {
for(var attrName in attr){
elem.setAttribute(attrName,attr[attrName]);
}
}else if(typeof(attr) == "string"){
elem.setAttribute(attr,attrVal);
}
},
/**
* 去除元素属性值
* @param elem
* @param attr
*/
"removeAttr" : function(elem,attr){
return elem.removeAttribute(attr);
},
/**
* 功能：//判断elemParent父节点是否包含elemChild节点，兼容写法
现代浏览器使用方法: elemParent.contains(elemChild)
IE6-IE8不支持contains方法，但支持elemChild.parentNode
* @param elemParent
* @param elemChild
* @returns {boolean}
*/
"elemContains" : function(elemParent,elemChild){
try{
while(elemChild = elemChild.parentNode){
if (elemChild === elemParent) {
return true;
}
return false;
}
}catch{
return false;
}
},
/**
* 创建元素节点
* @param tag
* @returns {HTMLElement}
*/
"createElement" : function(tag){
return document.createElement(tag);
},
/**
* 创建文档片段节点
* @returns {DocumentFragment}
*/
"createDocumentFragment" : function(){
return document.createDocumentFragment();
},
/**
* classList使用:
1.classList不能一次add或remove或toggle多个类名
2.不支持级联，即：$().a().b().c()连在一起调用方法的写法
*/
"classListFunc" : {
/**
* 判断浏览器是否支持classList
* @returns {boolean}
*/
"isAbled" : function(){
return document.body.classList!="undefined";
},
/**
* 获取元素的类名构成的数组
* @param elem
* @returns {DOMTokenList}
*/
"getClassList" : function(elem){
return elem.classList;
//elem.classList.length 获取类名个数
//elem.classList.item(0) 获取索引号为0的类名，相当于elem.classList[0]
},
/**
* 判断元素elem是否含有类className
* @param elem
* @param className
* @returns {boolean}
*/
"hasClass" : function(elem,className){
return elem.classList.contains(className);
},
/**
* 元素elem切换类className
* @param elem
* @param className
*/
"toggleClass" : function(elem,className){
elem.classList.toggle(className);
},
/**
* 元素elem添加类className
* @param elem
* @param className
*/
"addClass" : function(elem,className){
elem.classList.add(className);
},
/**
* 元素elem删除类className
* @param elem
* @param className
*/
"removeClass" : function(elem,className){
elem.classList.remove(className);
},
/**
* 获取元素elem的所有类名组成的字符串
* @param elem
* @returns {*|string}
*/
"getClassName" : function(elem){
return elem.className || elem.classList.toString();
},
/**
* classList扩展
*/
"classListExtend" : function(){
DOMTokenList.prototype.adds = function(tokens){
tokens.split(" ").forEach(function(token){
this.add(token);
}.bind(this)); //bind用以改变作用域，生成新的方法
return this;
};
/*调用举例*/
var clList = document.body.classList;
clList.adds("child1 child2 child3").toString();
}
},
/**
* 获取该元素后所有相邻元素--jquery
* @param elem
* @returns {*}
*/
"getNextElems" : function(elem){
return elem.nextAll();
},
/**
* 获取该元素前所有相邻元素--jquery
* @param elem
* @returns {*}
*/
"getPrevElems" : function(elem){
return elem.prevAll();
},
/**
* 把元素类型为空格而且是文本都删除
*/
"elemFunc": {
"del_ff": function(elem){
/**
* 1.nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
2.odeValue表示得到这个节点里的值。
3.removeChild则是删除元素的子元素。
* @type {NodeListOf<ChildNode> | ActiveX.IXMLDOMNodeList}
*/
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)){
elem.removeChild(elem_child)
}
}
},
/**
* 获取节点
*/
"getDomNode": function(){
var s= document.getElementById("test");
del_ff(s); //清理空格
var chils = s.childNodes; //得到s的全部子节点
var par = s.parentNode; //得到s的父节点
var ns = s.nextSbiling; //获得s的下一个兄弟节点
var ps = s.previousSbiling; //得到s的上一个兄弟节点
var fc = s.firstChild; //获得s的第一个子节点
var lc = s.lastChile; //获得s的最后一个子节点
}
},
/*
*/
/**
* 获取元素计算后的样式:只读不可写---获取单个style样式
A. style[样式]只能获取到style定义的行内样式
B. 谷歌和火狐获取到的color值是rgb值
* @param elem
* @param cssName
* @param PseudoClass //伪类名(可选)
* @returns {string}
*/
"getStyle" : function(elem,cssName,PseudoClass){
if (elem.currentStyle) { //IE
return elem.currentStyle.getAttribute(cssName);
}else{ //其他浏览器
if (PseudoClass) {
// return window.getComputedStyle(elem,PseudoClass)[cssName];
//方法1：此方法传入的cssName是驼峰式写法 eg:fontSize
return window.getComputedStyle(elem,PseudoClass).getPropertyValue(cssName);
//方法2：此方法传入的cssName为短横线相连写法 eg: font-size
}else{
return window.getComputedStyle(elem,null).getPropertyValue(cssName);
}
}
},
/**
* 获取元素的全部style样式
* @param elem
* @returns {mDom.cssText|cssText|string|*|string}
*/
"getStyleText" : function(elem){
return elem.style.cssText;
},
/**
* 设置元素的style样式 eg:setStyleText(document.getElementById("id"),{width:"100px",height:"100px"});
* @param elem
* @param cssobj
*/
"setStyleText": function(elem, cssobj) {
if (elem === null || typeof elem !== "object") {
return;
}
var c = elem.style.cssText;
if (typeof cssobj === "object") {
for (name in cssobj) {
var b = new RegExp(name.replace(/\s+/, "") + "\\s*:\\s*\\w+\\s*;", "i");
if (b.test(c)) {
c = c.replace(b, name + ":" + cssobj[name] + ";")
} else {
c += name + ":" + cssobj[name] + ";"
}
}
elem.style.cssText = c;
}
},
/**
* 获取元素节点的方式
* @returns {*}
*/
"getElem" : function(){
return document.getElementById("id名");
return document.getElementsByClassName("class类名"); //返回节点数组
return document.getElementsByTagName("标签名"); //返回节点数组
return document.querySelector("id选择器");
return document.querySelectorAll("class选择器"); //返回节点数组
}
}