【ife】任务二十五:JavaScript和树(四)

2017-01-03 19:16:16来源:作者:人点击

window.onload = function() {	var ul1 = [], ul2 = [];	var span1 = [], span2 = [];	var selectNode; 	bind_span1();	bind_span2();	var buttons = document.getElementsByTagName('button');	var type = document.getElementsByClassName("types")[0];	var nodes;	var node;	buttons[0].onclick = function() { 		var flag = 0;		var first = 0; 		var span = document.getElementsByTagName('span');		for (var i = 0; i < span.length; i++)			span[i].style.background = "white";		var a = document.getElementsByTagName('a');		for (var i = 0; i < a.length; i++)			a[i].style.background = "white";		var value = document.getElementsByTagName('input')[0].value; 		nodes = []; 		deepTraversal(type);		for (var i = 0; i < nodes.length; i++) { 			if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) { 				if (first == 0) { 					var ul = document.getElementsByClassName("types")[0].getElementsByTagName("ul");					for (var j = 0; j < ul.length; j++)						ul[j].style.display = "none";					var span = document.getElementsByTagName("span");					for (var j = 0; j < span.length; j++)						span[j].style.color = "#999999";					var a = document.getElementsByTagName('a');					for (var j = 0; j < a.length; j++)						a[j].style.color = "#999999";					first = 1;				}				if (nodes[i].parentNode.getAttribute("class") == "file") {					nodes[i].parentNode.parentNode.style.display = "block";					nodes[i].parentNode.parentNode.previousSibling.style.color = "red"; 				}				else if (nodes[i].parentNode.getAttribute("class") == "document") {					nodes[i].parentNode.parentNode.style.display = "block"; 					nodes[i].parentNode.parentNode.parentNode.parentNode.style.display = "block";					nodes[i].parentNode.parentNode.previousSibling.style.color = "red";					nodes[i].parentNode.parentNode.parentNode.parentNode.previousSibling.style.color = "red"; 				}				nodes[i].style.background = "blue"; 				flag = 1; 			}		}		if (flag == 0) 			alert("Not found!");	}	buttons[1].onclick = function() {		if (selectNode == null) { 			alert("Please select a node!");			return;		}		var value = document.getElementsByTagName('input')[0].value;		var next = selectNode.nextSibling;		for (var i = 0; i < next.children.length; i++) {			if (next.children[i].firstChild.firstChild.nodeValue == value) {				alert("Already exists");				return;			}		}		nodes = []; 		deepTraversal(type);		if (selectNode.parentNode.getAttribute("class") == "type") { 			var parent = selectNode.nextSibling;			var textNode = document.createTextNode(value);			var spanNode = document.createElement("span");			spanNode.appendChild(textNode);			var ulNode = document.createElement("ul");			var liNode = document.createElement("li");			liNode.setAttribute("class", "file")			liNode.appendChild(spanNode);			liNode.appendChild(ulNode);			parent.appendChild(liNode);			bind_span1(); 			bind_span2(); 		}		else if (selectNode.parentNode.getAttribute("class") == "file") { 			var parent = selectNode.nextSibling;			var textNode = document.createTextNode(value);			var aNode = document.createElement("a");			var liNode = document.createElement("li");			aNode.setAttribute("href", "#");			aNode.appendChild(textNode);			liNode.setAttribute("class", "document");			liNode.appendChild(aNode);			parent.appendChild(liNode);			bind_span2();		}		alert("Add Successfully!");	}	buttons[2].onclick = function() {		var flag = 0; 		var value = document.getElementsByTagName('input')[0].value;		nodes = []; 		deepTraversal(type);		for (var i = 0; i < nodes.length; i++) {			if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) {				var parent = nodes[i].parentNode;				for (var j = 0; j < parent.children.length; j++)					parent.removeChild(parent.children[j]);				parent.parentNode.removeChild(parent);				flag = 1;			}		}		bind_span1();		bind_span2();		if (flag == 1)			alert("Delete Successfully!");		else			alert("Not found!");	}	function bind_span1() { 		ul1 = []; 		span1 = []; 		var types = document.getElementsByClassName("types");		for (var i = 0; i < types.length; i++) {			var span = types[i].getElementsByTagName("span");			var ul = types[i].getElementsByTagName("ul");			for (var j = 0; j < span.length; j++)				span1.push(span[j]);			for (var j = 0; j < ul.length; j++)				ul1.push(ul[j]);		}		for (var i = 0; i < span1.length; i++) { 			span1[i].onclick = function() { 				selectNode = this; 				for (var j = 0; j < span1.length; j++) 					span1[j].style.color = "#999999";				this.style.color = "red";				for (var j = 0; j < ul1.length; j++)					ul1[j].style.display = "none";				this.nextSibling.style.display = "block"; 			};		}	}	function bind_span2() { 		ul2 = [];		span2 = []; 		var files = document.getElementsByClassName("files");		for (var i = 0; i < files.length; i++) {			var span = files[i].getElementsByTagName("span");			var ul = files[i].getElementsByTagName("ul");			for (var j = 0; j < span.length; j++)				span2.push(span[j]);			for (var j = 0; j < ul.length; j++)				ul2.push(ul[j]);		}		for (var i = 0; i < span2.length; i++) {			span2[i].onclick = function() {				selectNode = this; 				for (var j = 0; j < span2.length; j++) 					span2[j].style.color = "#999999";				this.style.color = "red"; 				for (var j = 0; j < ul2.length; j++) 					ul2[j].style.display = "none";				this.nextSibling.style.display = "block"; 			};		}	}	function deepTraversal(rootNode) {		if (rootNode != null) {  	nodes.push(rootNode);  	var children = rootNode.children;  	for (var i = 0; i < children.length; i++)  	deepTraversal(children[i]);  	 }  	}}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台