website
/
kud_5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			html,
			div,
			ul,
			li {
				margin: 0px;
				padding: 0px;
			}

			a {
				cursor: pointer;
			}

			li {
				list-style: none;
				cursor: pointer;
			}

			fieldset {
				border: #000 1px dashed;
				width: 225px;
				height: 225px;
				padding: 10px;
				text-align: center;
				float: left;
				margin-left: 5px;
			}

			#cont_left {
				width: 300px;
				height: 500px;
				float: left;
			}

			#cont_right {
				float: left;
			}

			.newcss1 {
				background-color: yellowgreen;
			}
			#menu1,#menu2,#menu3{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/dom/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="img/dom/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="img/dom/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/dom/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/dom/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/dom/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/dom/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/dom/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/dom/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/dom/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/dom/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/dom/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//179000522 廖孟豪
			//菜单收缩与扩展
			function show(title) {
				let currentMenu = document.getElementById(title);
				let currentStatus = currentMenu.style.display;
				//currentMenu.style.display = currentStatus == "" ? "none" : "";
				if(currentStatus==""){
					currentMenu.style.display="block";
					console.log(currentMenu.parentNode.parentNode.children);//children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点。
					let a = [];
					let b = currentMenu.parentNode.parentNode.children;
					console.log(currentMenu.parentNode);
					for(let i of b){
						//当nodeType==1时是元素节点，2是属性节点，3是文本节点。
						if(i.nodeType ==1 && i!=currentMenu.parentNode){
							a.push(i);
						}
					}

					//如果兄弟节点display为block则改为none
					for (let i = 0; i < a.length; i++) {
						console.log(a[i]);
						console.log(a[i].children[2]);//子节点第三个，即下标为2的标签
						if (a[i].children[2].style.display == "block") {
							a[i].children[2].style.display = ""
						}
					}
				}else{
					currentMenu.style.display = "";
				}


			}
			//获取原始图片路径
			function showImg() {
				let img1 = document.querySelector("#fruit");
				//console.log(img1);
				let msg1 = document.getElementById("msg1");
				//Lconsole.log(msg1);
				msg1.innerHTML = img1.getAttribute("src");
			}
			//获取喜欢的水果
			function getFruit() {
				let arr = []; //用于后面存放找到的值
				let enjoy = document.getElementsByName("enjoy");
				//console.log(enjoy);
				let msg2 = document.getElementById("msg2");
				//console.log(msg2);
				for (let i of enjoy) {
					//console.log(i.checked);//获取复选框是否被选中
					if (i.checked == true) {
						//console.log(i.value);//获取value
						arr.push(i.value);
					}
				}
				msg2.innerHTML = "你喜欢的水果是：" + arr;
			}
			//创建图片
			function createImg() {
				let msg3 = document.querySelector("#msg3");
				console.log(msg3.childNodes);
				if (msg3.childNodes.length < 1) { //msg3.childNodes.length获取子节点个数
					let creatImg = document.createElement("img"); //创建img节点
					creatImg.setAttribute("src", "img/dom/grape.jpg");
					msg3.appendChild(creatImg); //末尾追加方式插入节点
				} else {
					alert("已添加一张图片");
					console.log("已添加一张图片");
				}

			}
			//克隆图片
			function cloneImg() {
				let msg4 = document.getElementById("msg4");
				console.log(msg4);
				if (msg4.childNodes.length < 1) { //msg4.childNodes.length获取子节点个数
					msg4.appendChild(document.getElementById("fruit").cloneNode(true));
					//找到原始图片节点，克隆节点，最后再在末尾插入节点
				} else {
					alert("已克隆一张图片");
					console.log("已克隆一张图片");
				}

			}
			//改变图片
			function changeImg() {
				let fruit = document.getElementById("fruit");
				fruit.setAttribute("src", "img/dom/grape.jpg");
			}
			//删除图片
			function removeImg() {
				let fruit = document.getElementById("fruit");
				if (fruit) {
					fruit.parentNode.removeChild(fruit); //删除节点
					//parentNode:返回指定的节点在DOM树中的父节点.
				} else {
					alert("图片已被删除");
				}

			}
			//操作样式1
			function changeCss1() {
				let fruit = document.getElementById("fruit");
				fruit.style.border = "7px solid red";
			}
			//操作样式2
			function changeCss2() {
				let fieldset = document.getElementsByTagName("fieldset");
				//console.log(fieldset)
				for (let i of fieldset) {
					//console.log(i);
					i.style.backgroundColor = "green";
				}
			}
		</script>
	</body>
</html>