实验十一操作HTML DOM对象_js点击按钮删除水平线-CSDN博客

本文链接：https://blog.csdn.net/qq_56539172/article/details/124958974

1.实现页面中两个按钮的作用，删除所有的水平线，替换所有的水平线。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>HTML教程1</h1>
		<hr>
		<h1>HTML教程2</h1>
		<hr>
		<h1>HTML教程3</h1>
		<hr>
		<h1>HTML教程4</h1>
		<hr>
		<h1>HTML教程5</h1>
		<hr>
		<h1>HTML教程6</h1>
		<hr><br>
		<input type="button" value="删除水平线" onclick="RemoveBt()">
		<input type="button" value="替换水平线" onclick="ReplaceBt()">
		
		<script type="text/javascript">
			function RemoveBt()
			{
	            var hrs = document.getElementsByTagName("hr");//获取所有 <hr> 元素 
  	            for(var i=hrs.length-1;i>=0;i--)
				{
		             //依次获取水平线元素节点
		              var hr=hrs[i];
		             //使用其父元素的删除方法进行删除
		               hr.parentNode.removeChild(hr);
				}
			}
			function ReplaceBt()
			{
				// var firsthr=document.getElementById("h_1");
				
				var hrs = document.getElementsByTagName("hr");
				for(var i=hrs.length-1;i>=0;i--)
				{
					var myImage=document.createElement("img"); //创建图片节点
				        myImage.src='0'+[i+1]+'.png';//图片的路径
				        myImage.style.width="100px";//图片样式
					var firsthr=hrs[i];
                                        //把获取到的水平线元素节点作为父节点，替换节点，前者是要替换的节点也就是new节点，后者是被替换的节点也就是old节点
					firsthr.parentNode.replaceChild(myImage,firsthr);
				}
			}
		</script>
	</body>
</html>

2.添加元素（红色的水平线）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
	<h1>创建元素的一般方法</h1>
	<ol>
		<li>创建节点
		<ul id="h_1">
			<li>createElement(tag)---创建元素节点</li>
			<li>createTextNode(text)---创建文本节点</li>
			<li>createAttribut(name)---创建属性节点</li>
		</ul>
		</li>
		<li>调用方法添加到指定位置</li>
	</ol>
	<input type="button" value="添加水平线" onclick="appendBt()">
	
    <script type="text/javascript">
      function appendBt()
	  {
		  var nameid=document.getElementById("h_1");
		  var para=document.createElement("hr");
		  para.setAttribute("color","red"); //setAttribute这是设置属性节点
		  para.setAttribute("size","3");
		  nameid.parentNode.insertBefore(para,nameid);
       }    
  </script>
  
 </body>
</html>

3、点击按钮将第二个列表的内容添加到第一个列表中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		    <ul id="u_1">
			<li>1.Coffe</li>
			<li>2.Tea</li>
			</ul>
			<ul id="u_2">
			<li>3.Water</li>
			<li>4.Milk</li>
			</ul>
			<p>请点击按钮把项目从一个列表移动到另一个列表中。</p>
			<input type="button" value="亲自试一试" onclick="tryfun()">
		<script>
			function tryfun()
			{
				var set_2=document.getElementById("u_2").lastChild;
				var set_1=document.getElementById("u_1");
				set_1.appendChild(set_2);
			}
		</script>
	</body>
</html>

4、在一张页面中分三行显示有两个下拉列表框(select)、一个确定“按钮”(input)和一个段落标签(p)。在这两个下拉列表框中，分别表示省份和省份下辖的市县，在第一个列表中选择了某个的省份，则在第二个列表中列出所选省下辖的县，点击确定按钮，将两个下拉列表框中选择的“省份”和“县市”等内容显示在一个段落中。（不用列出中国的全部省份和省内的全部市县，只需列出2 ~ 3个省，每个省列出2 ~ 3个县就可以了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份<select id="province" onclick="showcity()">
		<option>省份</option>
		<option>湖北省</option>
		<option>浙江省</option>
		</select>
		城市<select id="city">
		<option>城市</option>
		<option>黄冈</option><option>武汉</option>
		<option>丽水</option><option>温州</option>
		</select>
		<br>
	    <input type="button" value="按钮" onclick="showbt()">
		<p id="demo"></p>
		
	<script>
		function showcity()
		{
			var citys = [[],["黄冈市","武汉市","宜昌市","荆门市","咸宁市"],["丽水市","温州市","杭州市","宁波市","绍兴市"]]; //在城市下拉框里创建一个二维数组，其中第一个数组赋值为空；
			var prov = document.getElementById("province"); //获取用户选择的省份；
			var index = prov.selectedIndex; //给出单击省份下拉框时的索引值；
			var showcity = citys[index]; //给出城市对应的省份索引值，找到该省份对应的城市城市一维数组；
			var citynode = document.getElementById("city"); //获取用户选择的城市；
			var item = citynode.childNodes; //城市的集合
			for(var i = 0;i<item.length;)  //for循环这里没有变量自增，是因为每当删除一个城市后，下一个城市就自动向前，所以只用一直删除第一个市县即可。
			{
				citynode.removeChild(item[i]);
			}
			for(var i = 0;i<showcity.length;i++)  //将得到的城市数组显示在城市的下拉列表中
			{
				var optioncitynode=document.createElement("option"); 
				optioncitynode.innerHTML=showcity[i]; //将获取的城市显示到城市下拉菜单的option标签中
				citynode.appendChild(optioncitynode);
			}

		}
		function showbt()
		{
			var prov=document.getElementById("province").value; 
			var City=document.getElementById("city").value;   
			document.getElementById("demo").innerHTML=prov+" "+City; //单击按钮时显示对应的省份以及城市
		}
	</script>	
	</body>
</html>