给dom节点扩展closest方法

想必大家都用过jq的closest方法(用来查找上级中最近的指定元素),这里我写的是一个简单的原生方法的实现

实际原生dom也是有这个方法的,只是兼容的浏览器少之又少

这里是一个最最简单的实现,工作中经常用到,所以记录一下

HTMLElement.prototype.closest = function(str){
	
	if(!str){
		return this.parentNode;
	}else{
		var temp = this.parentNode;
		while(temp){
			if(checkNode(temp)){
    			return temp;
    		}else{
    			temp = temp.parentNode;
    		}
		}
	}
	function checkNode(obj){
		var _this = obj;
		switch(str.substr(0,1)){
			case '.':
				if(_this.classList.contains(str.split('.')[1])){
					return true;
				}else{
					return false;
				}
				break;
			case '#':
				if(_this.id == str.split('#')[1]){
					return true;
				}else{
					return false;
				}
				break;
			default:
				if(_this.tagName == str){
					return true;
				}else{
					return false;
				}
				break;
		}
	}
}
给dom节点扩展closest方法

上半个月做的一个移动端整站项目–zol攒机

项目地址:m.zol.com.cn/cuanji/

项目难点:这个项目用到很大量的ajax、移动端很恶心的标签滑动切换(因为影响到容器的高度)、多标签的滚动加载(同一个页面 多个标签,每个标签单独加载)…

解决方案:其实最麻烦的就是多标签的滚动加载,我这里用到也不是什么特别高深的技术,只不过涉及到一点思想上的问题。

我的处理方式很傻瓜,声明一个全局变量(或者window对象的一个公开属性),用来存放当前显示的标签节点,这个节点就是对应标签内容的容器,我会把所有的相关参数,方法什么的一股脑都添加到这个节点的属性里,这样在切换标签的时候,只要获取到当前显示的标签,就能拿到所有的东西了,就像是把节点当成一种接口的思想~

上半个月做的一个移动端整站项目–zol攒机