造轮子，常用JS处理HTML工具(HTMLUtils)

最新推荐文章于 2021-06-29 00:21:18 发布

weixin_34090562

最新推荐文章于 2021-06-29 00:21:18 发布

阅读量231

点赞数

原文链接：https://my.oschina.net/tanweijie/blog/414454

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、处理数字变化方法，_change_num:变化数, _operate:数学运算符,加:'+',减:'-',乘:'*',除:'/'：

domNumChange: function(dom, _change_num, _operate) {
	        var _dom = this.__getDom(dom),
	        	_current_num = _dom.innerHTML,
	        	_operate_str = _current_num + _operate + _change_num;
	        	_dom.innerHTML = eval(_operate_str);
	    }

应用场景，如图：

在Team任务模块中，改变任务的状态的时候需要修改头部相应的数据统计，一个是任务数，一个是故事点统计；由于没有使用AngularJS这类的JS 框架，所以只能使用JS手动去修改了，这是个十分恼人的操作；

2、延时删除DOM内容，一般在提交数据显示提示的时候经常用到，比较简单，只是对setTimeout的简单处理，_time:时间,毫秒：

  domContentDelete:function(dom,_time){
	    	var _dom=this.__getDom(dom);
		    	setTimeout(function(dom){
		    		_dom.innerHTML="";
		    	}, _time);
	    }

3、获取元素所有的属性值，返回JSON对象，直接通过属性名访问；

(使用'_'替换'-')，attributeValue=domAttributeValues(dom).attributeName

domAttributeValues:function(dom){
	    	var _dom=this.__getDom(dom),
				_attributes=_dom.attributes,
				_length=_attributes.length,
				_json='';
				for(var i=0;i<_length;i++){
					_json+='\''+_attributes[i].nodeName.replace(/-/g,'_')+'\':\''+_attributes[i].nodeValue+'\',';
				}
				_json='({'+_json+'})';
				_json=_json.replace(/,}/,'}');
			return eval(_json);
	    }

4、domToggle:显示隐藏，event:绑定事件，zone:事件触发区域，target:显示隐藏区域：

domToggle:function(event,zone,target){
	    	var _zone = this.__getDom(zone),
	    		_target= this.__getDom(target);
	    		if(_zone){
	    			_zone.style.cursor='pointer';
	    			_zone.addEventListener(event,function(evt){
						var _display=_target.style.display;
							if(_display=='none'){
								_target.style.display='block';
							}
							else if(_display=='block'){
								_target.style.display='none';
							}
	    			});
	    		}
	    		else{
	    			console.error('HTMLUtils domToggle ERROR,zone:'+zone+' can not found!');
	    		}
	    	
	    }

5、domAutoBindEvent:DOM自动绑定同一个事件,event:事件,callback:事件处理函数：

domAutoBindEvent:function(dom,event,callback){
	    	var _doms=this.__getDoms(dom),_length=_doms.length;
	    		if(_doms){
	    			for(var i=0;i<_length;i++){
	    				var _dom=_doms[i];
	    					_dom.addEventListener(event,callback,false);
	    			}
	    		}
	    	
	    }

工具测试，一些测试的HTML：

<span id='num-1'>2</span>
<span id='num-2'>2</span>
<span id='num-3'>2</span>
<span id='num-4'>2</span>
<span id='num-5'>21</span>
<span id='delete-1'>我要被删除啦~</span>
<span id='attr-1' value-1='value-1 value' value-2='value-2 value' value-3='value-3 value' value-4='value-4 value' value-5 value-6='' value-7-8='value-7-8 9'></span>

<div id='click-zone'><span>点击区域</span></div>
<div id='target-zone' style='display:none'>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>

<div auto-event>
	<span>相同事件1-1</span>
	<span>相同事件1-2</span>
	<span>相同事件1-3</span>
</div>

<div auto-event>
	<span>相同事件2-1</span>
	<span>相同事件2-2</span>
	<span>相同事件3-3</span>
</div>

如图：

JS方法使用：

(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-1',2,"+");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-2',1,"-");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-3',6,"*");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-4',-1,"+");
(function(dom,_change_num,_operate){
	HTMLUtils.domNumChange(dom,_change_num,_operate);
})('#num-5',3,"/");
(function(dom,_time){
	HTMLUtils.domContentDelete(dom,_time);
})('#delete-1',3000);
(function(dom){
	var _dom_attrs=HTMLUtils.domAttributeValues(dom);
	console.log(_dom_attrs.id);
	console.log(_dom_attrs.value_1);
})('#attr-1');

(function(event,zone,target){
	HTMLUtils.domToggle(event,zone,target);
})('click','#click-zone','#target-zone');

(function(dom,event,callback){
	HTMLUtils.domAutoBindEvent(dom,event,callback);
})('[auto-event]','click',function(e){
    var target = e.target;
	console.log(target.tagName);
	if (target.tagName === 'SPAN'){
		alert(e.target.innerHTML);
	}
});

完整的JS，Git@OSC地址：https://git.oschina.net/tanweijie/HTMLUtils.js

/**
 * HTML操作工具(HTMLUtils)
 * 
 * { 方法参数,dom:选择元素字符,如:id:'#id',class:'.class',attribute:'[attribute]|[attribute=attributeValue]' }
 * 
 * { domNumChange:DOM数字变化,_change_num:变化数, _operate:数学运算符,加:'+',减:'-',乘:'*',除:'/' }
 * 
 * { domContentDelete:延时删除DOM内容,_time:时间,毫秒 }
 * 
 * { domAttributeValues:获取元素所有的属性值,返回JSON对象,直接通过属性名访问(使用'_'替换'-'),
 * 	attributeValue=domAttributeValues(dom).attributeName }
 * 
 * { domToggle:显示隐藏,event:绑定事件,zone:事件触发区域,target:显示隐藏区域 }
 * 
 * { domAutoBindEvent:DOM自动绑定同一个事件,event:事件,callback:事件处理函数 }
 * 
 * 
 */
var HTMLUtils = {
	    __getType: function(_obj) {
	        return typeof(_obj);
	    },
	    __getDom:function(_dom){
	    	return document.querySelector(_dom);
	    },
	    __getDoms:function(_dom){
	    	return document.querySelectorAll(_dom);
	    },
	    domNumChange: function(dom, _change_num, _operate) {
	        var _dom = this.__getDom(dom),
	        	_current_num = _dom.innerHTML,
	        	_operate_str = _current_num + _operate + _change_num;
	        	_dom.innerHTML = eval(_operate_str);
	    },
	    domContentDelete:function(dom,_time){
	    	var _dom=this.__getDom(dom);
		    	setTimeout(function(dom){
		    		_dom.innerHTML="";
		    	}, _time);
	    },
	    domAttributeValues:function(dom){
	    	var _dom=this.__getDom(dom),
				_attributes=_dom.attributes,
				_length=_attributes.length,
				_json='';
				for(var i=0;i<_length;i++){
					_json+='\''+_attributes[i].nodeName.replace(/-/g,'_')+'\':\''+_attributes[i].nodeValue+'\',';
				}
				_json='({'+_json+'})';
				_json=_json.replace(/,}/,'}');
			return eval(_json);
	    },
		domToggle:function(event,zone,target){
	    	var _zone = this.__getDom(zone),
	    		_target= this.__getDom(target);
	    		if(_zone){
	    			_zone.style.cursor='pointer';
	    			_zone.addEventListener(event,function(evt){
						var _display=_target.style.display;
							if(_display=='none'){
								_target.style.display='block';
							}
							else if(_display=='block'){
								_target.style.display='none';
							}
	    			});
	    		}
	    		else{
	    			console.error('HTMLUtils domToggle ERROR,zone:'+zone+' can not found!');
	    		}
	    	
	    },
	    domAutoBindEvent:function(dom,event,callback){
	    	var _doms=this.__getDoms(dom),_length=_doms.length;
	    		if(_doms){
	    			for(var i=0;i<_length;i++){
	    				var _dom=_doms[i];
	    					_dom.addEventListener(event,callback,false);
	    			}
	    		}
	    	
	    }
	};

转载于:https://my.oschina.net/tanweijie/blog/414454