第十四次作业+心得添加，删除图片+全选和全不选复选框+创建几行几列的表格-CSDN博客

本文链接：https://blog.csdn.net/m0_66328839/article/details/123686794
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/测试.css" />
</head>

<body>
	<div> </div>
	<div id="div">
		<a id="baidu" href="http://www.baidu.com">百度</a>
		<img id="img" src="img/下载.jpg" width="50px" height="100px" />
	</div>


	<input type="radio" name="ss" onclick="zhanshi()">战士
	<input type="radio" name="ss" onclick="fashi()">法师<br>
	<img id="wangzhe">

	<button id="tian" onclick="tianjia()">添加图片</button>
	<div id="ima"></div>

	<button id="tian1" onclick="shandiao()">删除图片</button>
	<div id="wu">
		<img src="img/zhanshi.jpg">
	</div>

	<script>
		//添加图片 战士和法师
		function zhanshi() {
			var imgEle = document.getElementById("wangzhe");
			imgEle.setAttribute("src", "img/zhanshi.jpg")                    //战士图片的方法
			gaokuan(imgEle);
		}

		function fashi() {
			var imgEle = document.getElementById("wangzhe");
			imgEle.setAttribute("src", "img/fashi.jpg")                            //法师图片 的方法
			gaokuan(imgEle);
		}
		function gaokuan(imgEle) {
			imgEle.setAttribute("width", "500px");//设置高宽
			imgEle.setAttribute("height", "300px");
		}


		// 删除标签
		function shandiao() {
			//思路：先获取父元素，在获取子元素， 通过父元素删除子元素          //删除图片的方法
			//var divEle = document.getElementById("image"); // div1          
			var imgEle = document.getElementById("wu"); // img
			imgEle.parentNode.removeChild(imgEle);

			//divEle.removeChild(imgEle)
		}

		// 点击按钮添加照片
		function tianjia() {
			var divele = document.getElementById("ima")                       //添加图片的方法
			//创建图片标签
			var img = document.createElement("img"); //创建//设置标签的属性
			img.setAttribute("src", "img/hsidh.jpg");
			img.setAttribute("width", "200px");
			img.setAttribute("height", "300px");

			divele.appendChild(img)
		}
	</script>




	<!-- ==================================手动输入添加行和列===================================================== -->
	添加几行<input id="row">
	添加几列<input id="col">
	<button onclick="biaoge()">添加</button>
	<div id="ima"></div>

	<script>
		//1:获取用户输入的内容
		function biaoge() {
			//注意 ： 不管是添加元素还是删除元素，都要通过父元素来进行操作
			var row = document.getElementById("row").value;
			var col = document.getElementById("col").value;
			//2:创建表格
			//先创建table王然后在创建里面的tr，有几行就创建几个tr
			//然后在tr中创建一个一个的单元格，有几列就创建几列
			//table内有tr, tr内有td, 通过父标签添加子标签
			var varele = document.getElementById("ima")

			var table = document.createElement("table");//创建//设置标签的属性
			table.setAttribute("width", "300px")
			table.setAttribute("height", "100px")
			table.setAttribute("border", "1px solid")
			for (var i = 0; i < row; i++) {
				var tr = document.createElement("tr");//创建//设置标签的属性
				for (var j = 0; j < col; j++) {
					var td = document.createElement("td");//创建//设置标签的属性
					tr.appendChild(td);
				}
				table.appendChild(tr);
			}

			// var tr = document.createElement("tr");//创建//设置标签的属性
			// var td = document.createElement("td");//创建//设置标签的属性
			// table.appendChild(tr);   //添加子标签
			// tr.appendChild(td);
			varele.appendChild(table)
		}






		// ===================================================节点==================================================
		//DOM 针对于某一个或者某些标签进行增删改操作，
		// 为某一个便签添加子标签，删除子标签，修改属性 ， 前提 ： 或者到指定的标签
		//DOM 参考我们的编码，看得懂，知道在做什么，参考我们的编码实现即可

		//获取节点, 元素节点，标签
		var ele = document.getElementById("div");
		var child = ele.childNodes;
		var par = ele.parentElement;

		//节点不能自删的，删除一个节点的话，必须要由父节点才能删除
		var t = ele.nodeType; // 数字，不同的数字代表的意思是不一样的
		var nn = ele.nodeName; // 节点的名称
		var nv = ele.nodeValue; // 节点的值
		console.log(t)
		console.log(nn)
		console.log(nv)
		ele.setAttribute("class", "hello");
	</script>






<!-- // ===================================================全选与全不选================================================== -->
	<h1> 选数字 </h1>
	<hr>
	<!-- 声明需要的复选框 -->
	<div>
		<input type="checkbox"> 1<br>
		<input type="checkbox"checked="checked"> 2<br>
		<input type="checkbox"> 3<br>
		<input type="checkbox"checked="checked"> 4<br>
		<input type="checkbox" >5<br>
	</div>

	<button onclick="selectall()">全选</button>
	<button onclick="allDontchoose()">全不选</button>

	<script>
		//方法 来循环每一个inputs  把checked = true
		function selectall() {
			var inputs = document.getElementsByTagName("input");     //checked 
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].checked = true;
			}
		}

		function allDontchoose() {
			var inputs = document.getElementsByTagName("input");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].checked = false;
			}
		}
	</script>
</body>

</html>