simple DOM handler

simple-dom.js

(function(win, doc){

	var $ = function(selector) {

		// 获取元素的方法映射
		var matches = {
			'#': 'getElementById',
			'.': 'getElementsByClassName',
			'@': 'getElementsByName',
			'*': 'getElementsByTagName',
			'=': 'querySelectorAll'			
		}[selector[0]]; // 根据所传递的选择器的第一个字符来匹配选择器方法

		// 标准方法获取元素集合
		var eles = document[matches](selector.slice(1));

		// 根据结果获取单个元素或者元素集合
		return eles.length < 2 ? eles[0] : eles;

	};

	win.$ = $;

	/**
	 *find()方法
	 *直接使用元素Selector API提供的querySelectorAll方法获取元素集合
	 */
	win.Element.prototype.find = win.Element.prototype.querySelectorAll;
	/**
	 * NodeList 元素集合无法直接使用querySelectorAll方法获取指定元素给出提示并返回NodeList对象
	 */
	win.NodeList.prototype.find = function find(ele) {

		console.error('NodeList中不能进行查找操作，请使用$("=%s")的方式', ele);
		return this;

	};
	/**
	 * each()方法
	 * 使用原生的Array forEach方法遍历元素
	 */
	win.NodeList.prototype.each = Array.prototype.forEach;
	/**
	 * attr()方法
	 * 设置或者获取给定元素的属性
	 */
	win.Element.prototype.attr = function(attrName, attrValue) {

		if(attrValue) {

			this.setAttribute(attrName, attrValue);
			return this;

		} else {

			return this.getAttribute(attrName);
		}

	};
	/**
	 * NodeList 元素集合的属性设置方式
	 * 遍历时单个设置
	 */
	win.NodeList.prototype.attr = function(attrName, attrValue) {

		this.each(function(ele){

			ele.attr(attrName, attrValue);

		});

		return this;

	};
	/**
	 * css()方法
	 * 设置指定元素的样式
	 * 获取指定元素指定样式
	 */
	win.Element.prototype.css = function(prop, value) {

		if(value) {

			this.style[prop] = value;
			return this;

		} else {

			return this.style[prop];

		}

	};
	/**
	 * NideList 元素集合的css()方法
	 * 遍历NodeList元素集合，单个设置/获取元素的样式
	 */
	win.NodeList.prototype.css = function(prop, value) {

		this.each(function(ele){

			ele.css(prop, value);

		});

		return this;

	};
	/**
	 * on()
	 * 给指定元素绑定指定的事件，可绑定多个事件
	 */
	win.Element.prototype.on = function(eventType, callback) {

		eventType = eventType.split(' '); // multi event

		for(var i=0, eventLength = eventType.length;i<eventLength;i++){

			this.addEventListener(eventType[i], callback, false);

		}

		return this;

	};
	/**
	 * 遍历NodeList元素集合并逐个绑定事件
	 */
	win.NodeList.prototype.on = function(eventType, callback) {

		this.each(function(ele){

			ele.on(eventType, callback);

		});

		return this;

	};
	/*
	 * addClass()
	 * 给指定元素添加指定的class
	 */
	win.Element.prototype.addClass = function(className) {

		this.classList.add(className);
		return this;

	};
	/*
	 * NodeList元素集合遍历时单个添加class
	 */
	win.NodeList.prototype.addClass = function(className) {

		this.each(function(ele) {

			ele.classList.add(className);

		});

		return this;

	};
	/* removeClass()
	 * 移除指定元素的指定class
	 */
	win.Element.prototype.removeClass = function(className) {

		this.classList.remove(className);
		return this;

	};
	/*
	 * NodeList 元素集合遍历时单个移除元素
	 */
	win.NodeList.prototype.removeClass = function(className) {

		this.each(function(ele){

			ele.classList.remove(className);

		});

		return this;

	};
	/*
	 * hasClass()
	 * 检查指定元素是否存在指定的class
	 */
	win.Element.prototype.hasClass = function(className) {

		return this.classList.contains(className);
	
	};
	/*
	 * first()
	 * 获取指定元素集合中首个元素
	 */
	win.NodeList.prototype.first = function() {

		return (this.length < 2) ? this : this[0];
	
	};
	/*
	 * last()
	 * 获取指定元素集合中最后一个元素
	 */
	win.NodeList.prototype.last = function() {

		return (this.length > 1) ? this[this.length - 1] : this;
	
	};

})(window, document);