JavaScript前端开发 DOM 列表的增删和移动

利用DOM操作节点的方式实现列表的增删和移动

case.html

	
		
		
		
	
	
		

			

				

					

						
						
							[上移]
							[下移]
							[删除]
						
					
				
				

					添加项目
					

						添加到列表
						
						
						
						
					
				
			
		
		
		
		
	

 

SmartList.js

(function(window) {
	/**SmartList智能列表生成
	 * @param {String} prefix 前缀
	 * @param {Array} defList 默认项数组
	 */
	var SmartList = function(prefix, defList) {
		Find.prototype.prefix = prefix;
		var find = new Find(document.getElementsByClassName(prefix)[0]); // 获取对象
		//创建List对象 实现默认列表项的添加
		var list = new List(find.className('option')); //通过find对象查找class为list-option的
模板
		//基于defList数组中的每个元素来添加列表项
		for (var i in defList) {
			list.add(defList[i]);
		}
		
		var add = {
			'show':find.className('add-show'),	//获取“添加项目”元素对象
			'area':find.className('add-area'),	//获取添加区域块的元素对象
			'input':find.className('add-input'),	//获取添加的文本框元素对象
			'add':find.className('add-add'),	//获取添加按钮的元素对象
			'cancel':find.className('add-cancel')	//获取取消按钮的元素对象
		};
		add.show.onclick = function() {	//控制添加区域的显示隐藏
			add.area.classList.remove(prefix + '-hide');
		};
		add.add.onclick = function()  {	//添加到列表
			list.add(add.input.value);
			
		};
		add.cancel.onclick =  function() {		//取消添加
			add.area.classList.add(prefix + '-hide');
		};

	};
	//Find构造函数的参数表示从哪个元素对象中进行查找
	//原型中的prefix属性表示class前缀，className()方法用于根据class查找元素
	function Find(obj) {
		this.obj = obj;
	}
	Find.prototype = {
		prefix: '', //待查找的前缀
		className: function(className) {
			return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
		},

		//prev()方法，next()方法用于查找移动列表项的前后元素
		/*若获取当前对象的前一个或后一个节点是null,则返回node;
		  否则通过循环判断node的节点类型
		  确定获取的node是否是元素节点，若是则停止循环并返回
		*/
		prev: function() {
			var node = this.obj.previousSibling; //	获取当前元素对象的前一个节点
			while (node) {
				if (node.nodeType === Node.ELEMENT_NODE) {
					break;
				}
				node = node.previousSibling;
			}
			return node;
		},

		next: function() {
			var node = this.obj.nextElementSibling; //获取当前元素对象的后一个节点
			while (node) {
				if (node.nodeType === Node.ELEMENT_NODE) {
					break;
				}
				node = node.nextElementSibling;
			}
			return node;
		}
	}

	/**
	 * List 生成列表
	 * @constructor
	 * @param {Object} tmp 模板对象
	 */
	function List(tmp) { // List构造函数 参数tmp表示操作的
元素模板
		this.tmp = tmp;
		this.obj = tmp.parentNode; // 保存模板的父节点对象
		this.obj.removeChild(tmp); //从
中移除
模板
	}
	List.prototype = {
		/**
		 * 向列表中添加项目
		 * @param {String} value 新项目的文本值
		 */
		add: function(value) {
			var tmp = this.tmp.cloneNode(true); //克隆一个元素节点
			//1.将value添加到list-input的value属性中
			var find = new Find(tmp);
			find.className('input').value = value;
			var obj = this.obj; //获取ul元素对象
			//2.为list-up（上移）添加单击事件
			find.className('up').onclick = function() { //添加上移单击事件
				var prev = find.prev(); //获取前一个节点
				if (prev) {
					obj.insertBefore(tmp, prev); //在prev前插入tmp
				} else {
					alert('已经是第一个了');
				}
			};
			//3.为list-down（下移）添加单击事件
			find.className('down').onclick = function() { //添加下移单击事件
				var next = find.next(); //获取后一个节点
				if (next) {
					obj.insertBefore(next, tmp); //在tmp前插入next
				} else {
					alert('已经是最后一个了');
				}
			};
			//4.为list-del（删除）添加单击事件
			find.className('del').onclick = function() { //添加删除单击事件
				if (confirm('您确定要删除？')) {
					obj.removeChild(tmp);
				}
			}
			//5.将创建的列表项添加到列表末尾
			this.obj.appendChild(tmp);
		}

	};
	window['SmartList'] = SmartList;
})(window);