JS笔记第五期（DOM增删改查）

重要知识点：

getElememtsByTagName()可以根据标签名字获取一组元素节点对象
-即使查询到的数组元素只有一个，也会返回一个数组

innerHTML识别不了自结束标签的文本内容
采取读属性值的方式，要哪个读哪个元素.属性名（class属性不能这样读）
元素.className 可以读class属性

childNodes属性会获取包括文本节点在的所有节点，（DOM标签空白也会被当成文本节点）
children属性可以获取当前元素的所有子元素

var fir=phone.firstElementChild;可以获取到第一个子节点，包括空白文本节点
但不建议使用，有的浏览器不兼容

练习及代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link  rel="stylesheet" type="text/css" href="./css/Domlianxi.css"/>
		<script type="text/javascript">
			/* DOM查询练习 */
		window.onload=function(){
		//1、查找#bj节点
		var btn01=document.getElementById("btn01");//获取btn01对象
		btn01.onclick=function(){//为id为btn01的按钮绑定一个单击响应函数
			//查找#bj节点
			var bj=document.getElementById("bj");
			//打印bj,innerHTML:通过这个获取元素内部的HTMML代码
			alert(bj.innerHTML);
		};
		//查找所有li节点
		var btn02=document.getElementById("btn02");
		btn02.onclick=function(){
			//getElememtsByTagName()可以根据标签名字获取一组元素节点对象
			//即使查询到的数组元素 只有一个，也会返回一个数组
			var lis=document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
			
		}
		
		//查找name=gender的所有节点
		var btn03=document.getElementById("btn03");
		btn03.onclick=function(){
		var inputs=document.getElementsByName("gender");
			for(var i=0;i<inputs.length ;i++){
				//innerHTML识别不了自结束标签的文本内容
				//采取读5属性值的方式，要哪个读哪个 元素.属性名（class属性不能这样读）
				//元素.className 可以读class属性
				alert(inputs[i].value);
			}
		};
		//查找#city下所有li节点
		 var btn04=document.getElementById("btn04");
		 btn04.onclick=function(){
			 //获取所有id为city的元素
			var city=document.getElementById("city") ;
			//查找city下所有的li节点
			var lis=city.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
		 };
		//返回#city的所有子节点
		var btn05=document.getElementById("btn05");
		btn05.onclick=function(){
		var city=document.getElementById("city");
		/* 
		childNodes属性会获取包括文本节点在的所有节点，（DOM标签空白也会被当成文本节点）
		 children属性可以获取当前元素的所有子元素
		 */
			var cns=city.children;
			alert(cns.length);
		};
		//返回#phone的第一个子节点
		var btn06=document.getElementById("btn06");
		btn06.onclick=function(){
		 var phone=document.getElementById("phone");
		 /* 
		 var fir=phone.firstElementChild;可以获取到第一个子节点，包括空白文本节点
		 但不建议使用，有的浏览器不兼容
		 */
			 var fir=phone.firstElementChild;
			  alert(fir.innerHTML);
		};
		//返回#bj的父节点
		var btn07=document.getElementById("btn07");
		btn07.onclick=function(){
			var bj=document.getElementById("bj");
			//获取父节点
			var pn=bj.parentNode;
			alert(pn.innerText);
		};
		//返回#Android的前一个兄弟节点
		var btn08=document.getElementById("btn08");
		btn08.onclick=function(){
		   var and=document.getElementById("android");
		   //返回前一个兄弟节点 var ps=and.previousSibling;可能获取到空白文本
		   // var pq=and.previousElementSibling获取前一个兄弟元素，有点不支持
		   var ps=and.previousSibling;
		   alert(ps);
			
		};
		//返回#username的value属性值
	    var btn09=document.getElementById("btn09");
	    btn09.onclick=function(){
		var username=document.getElementById("username");
		//获取属性值
		alert(username.value);
	};
		//设置#username的value属性值
		var btn10=document.getElementById("btn10");
		    btn10.onclick=function(){
			var username=document.getElementById("username");
			//获取属性值
			username.value="嘿嘿";
			alert(username.value);
		};
		//返回#bj的文本值
		var btn11=document.getElementById("btn11");
		    btn11.onclick=function(){
			var bj=document.getElementById("bj");
			//返回文本值
			alert(bj.innerHTML);
		};
		};		
		</script>
	</head>
	
	
	<body>
		<div class="b1">
		<div class="box1">
		<p>你喜欢哪个城市？</p>
		<ul id='city'>
			<li class="box3" id="bj">北京</li>
			<li class="box3">上海</li>
			<li class="box3">东京</li>
			<li class="box3">首尔</li>
		</ul>
		<br /><br />
		<p>你喜欢哪款单机游戏？</p>
		<ul id='game'>
			<li id="dw " class="box3">第五人格</li>
			<li class="box3">王者</li>
			<li class="box3">吃鸡</li>
			<li class="box3">蛋仔</li>
		</ul><br /><br />
		<p>你手机的操作系统是？</p>
		<ul id='phone'>
			<li id="ios" class="box3">IOS</li>
			<li class="box4" id="android">Android</li>
			<li class="box4">Windows</li>
	</ul>
		</div>
        <div class="box2">
			<form>
				<p>gender:
				<label><input checked="checked" type="radio" name="gender" value="Male">Male</label>
				<label><input type="radio" name="gender" value="FeMale">FeMale</label>
				</p>	
			</form>
		      <p>name :&emsp;<input type="text" id="username" value="转晴喵"></p>
		</div></div>
		<div class="b1_1" id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#Android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
			
		</div>

		
	</body>
</html>

CSS样式代码：


.b1{
	width: 500px;
	height:600px ;
	float: left;
}
.b1_1{
	width: 400px;
	float: left;
	margin: 10px;
	padding: 5px;
}
.box1{
	width: 400px;
	height: 300px;
	border: black solid 3px;
	margin: 10px;
	padding: 5px;
}
.box2{
	width: 400px;
	height: 100px;
	border: #000000 solid 3px;
	padding: 5px;
	margin: 10px;
}
ul{
	margin-top: 0px;
	padding-inline-start: 0%;
}
.box1>ul>li{
	list-style-type: none;
	float: left;
	background-color:greenyellow;
	text-align: center;
	line-height: 30px;
	margin: 5px;
	padding: 5px;
	border: #000000 1px solid;

}
/* .box3{
	height: 30px;
	width: 50px;
	background-color:greenyellow;
	text-align: center;
	line-height: 30px;
	margin: 5px;
	border: #000000 1px solid;
}
.box4{
	height: 30px;
	width: 80px;
	background-color:greenyellow;
	text-align: center;	
	line-height: 30px;
	margin: 5px;
	border: #000000 1px solid;
} */

页面效果：

增删改练习:

/* 1、创建“广州”节点，添加到#city下
       document.createElement("li");
       -用于创建一个元素节点对象，需要一个标签名作为参数，
       并将创建好的对象作为返回值返回
       document.createTextNode();
       -用于创建一个文本节点，需要一个文本内容作为参数，将会根据内容创建文本节点
       父节点.appendChild(子节点);
       -向一个父节点中添加一个新的子节点

2、将“广州”节点插入到#bj前面
       父节点.insertBefore(新节点，旧节点）；
       -在指定的子节点前面插入新的子节点
       -只能父节点调用

4、使用“广州”节点替换#bj节点
父节点. replaceChild(新节点,旧节点);
-可以指定新的节点替换已有的子节点

   5、删除#bj节点
       父节点.removeChild(子节点);
       -删除指定子节点
       简易方法：找到子节点的爸，让他爸干掉他
       子节点.parentNode.removeChild(子节点);

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM增删改</title>
		<link  rel="stylesheet" type="text/css" href="./css/Domlianxi.css"/>
		<script type="text/javascript">
		window.onload=function(){

		/* 1、创建“广州”节点，添加到#city下 
		document.createElement("li");
		  -用于创建一个元素节点对象，需要一个标签名作为参数，
		  并将创建好的对象作为返回值返回
		document.createTextNode();
		  -用于创建一个文本节点，需要一个文本内容作为参数，将会根据内容创建文本节点
		父节点.appendChild(子节点);
		 -向一个父节点中添加一个新的子节点
		
		*/
		myClick("btn01",function(){
			//创建“广州”节点 <li>广州</li>
			/* var city=document.getElementById("city");//获取父节点
			var li=document.createElement("li");//创建li
			var gztext=document.createTextNode("广州");//创建文本节点
			li.appendChild(gztext);//添加了，但是只显示在内存里面
			city.appendChild(li);//将它添加到UL当中才能在页面中显示 */
			//city.innerHTML+="<li>广州</li>";//直接添加（简单方便、但变化较大）
			/* 两个方法折中一下 */
			 var city=document.getElementById("city");//获取父节点
			 var li=document.createElement("li");//创建li
			 li.innerHTML="广州";
			 city.appendChild(li);
			
		});
		/* 2、将“广州”节点插入到#bj前面
		父节点.insertBefore(新节点，旧节点）；
		  -在指定的子节点前面插入新的子节点
		  -只能父节点调用 */
		myClick("btn02",function(){
			//在内存里面创建一个
			var li=document.createElement("li");
			var gzText=document.createTextNode("广州");
			li.appendChild(gzText);
			var bj=document.getElementById("bj");//获取bj节点
			var city=document.getElementById("city");//获取父节点
			city.insertBefore(li,bj);//插入到节点之前
		});
		//3、设置#bj内的HTML代码
		myClick("btn03",function(){
			var bj=document.getElementById("bj");//获取bj节点
			bj.innerHTML="重庆";
		});
		/* 4、使用“广州”节点替换#bj节点
		父节点. replaceChild(新节点,旧节点);
		  -可以指定新的节点替换已有的子节点
		 */
		myClick("btn04",function(){
			//在内存里面创建一个
			var li=document.createElement("li");
			var gzText=document.createTextNode("广州");
			li.appendChild(gzText);
			var bj=document.getElementById("bj");//获取bj节点
			var city=document.getElementById("city");//获取父节点
			city.replaceChild(li,bj);//替换
		});
	/* 	5、删除#bj节点
		父节点.removeChild(子节点); 
		  -删除指定子节点
		简易方法：找到子节点的爸，让他爸干掉他
		         子节点.parentNode.removeChild(子节点); 
		*/
		myClick("btn05",function(){
			var bj=document.getElementById("bj");//获取bj节点
			/* var city=document.getElementById("city");//获取父节点
			city.removeChild(bj); */
			bj.parentNode.removeChild(bj); 
		});
		//6、读取#city内的HTML代码
		myClick("btn06",function(){
			var city=document.getElementById("city");//获取父节点
			alert(city.innerHTML);
		});
		
		};
		//将获取按钮封装为一个函数
		function myClick(idStr,fun){
			var btn=document.getElementById(idStr);
			btn.onclick=fun;
		};
		</script>
	</head>
<body>
		<div class="b1">
		<div class="box1">
		<p>你喜欢哪个城市？</p>
		<ul id='city'>
			<li class="box3" id="bj">北京</li>
			<li class="box3">上海</li>
			<li class="box3">东京</li>
			<li class="box3">首尔</li>
		</ul></div>
		<div class="b1_1" id="btnList">
			<div><button id="btn01">创建“广州”节点，添加到#city下</button></div>
			<div><button id="btn02">将“广州”节点插入到#bj前面</button></div>
			<div><button id="btn03">设置#bj内的HTML代码</button></div>
			<div><button id="btn04">使用“广州”节点替换#bj节点</button></div>
			<div><button id="btn05">删除#bj节点</button></div>
			<div><button id="btn06">读取#city内的HTML代码</button></div>
			
			
		</div>

		
	</body>
</html>