js基础dom全选，操作元素练习

最新推荐文章于 2022-09-13 10:04:59 发布

图图爱上壮壮妈

最新推荐文章于 2022-09-13 10:04:59 发布

阅读量182

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ChinaLibrary/article/details/123937247

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选/不选练习</title>
	</head>
	<body>

			<form action="" method="post">
				你爱好的运动是<input name="Checkbox" type="checkbox" id = "checkedAllbox"checked>全选/全不选
				<br />
				<input type="checkbox" name="items" value="足球" />足球
				<input type="checkbox" name="items" value="篮球" />篮球
				<input type="checkbox" name="items" value="羽毛球" />羽毛球
				<input type="checkbox" name="items" value="兵乓球" />乒乓球
				<br />
				<input type="button" id="checkedAllBtn" value="全选" / >
				<input type="button" id="checkedNoBtn" value="全不选" / >
				<input type="button" id="checkedRevBtn" value="反选" / >
				<input type="button" id="sendBtn" value="提交" / >
				</div>
			</form>
			<div id="index">
				<div id="c">
					
				
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				</div>
				<div id="btnlist">
					<div><button type="button" id="btn01">创建一个广州节点</button></div>
					<div><button type="button" id="btn02">将广州节点插入到bj前面</button></div>
					<div><button type="button" id="btn03">使用广州节点替换bj节点</button></div>
					<div><button type="button" id="btn04">删除广州节点</button></div>
					<div><button type="button" id="btn05">读取city内的节点数量</button></div>
					<div><button type="button" id="btn06">读取bj内的html代码</button></div>
				</div>
			</div>
			<script type="text/javascript">
				window.onload = function(){
				// 为id为checkedAllBtn绑定一个点击事件
				//全选
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){
					//获取四个多选框items
					var items = document.getElementsByName('items');
					//遍历items
					for(var i = 0;i<items.length;i++){
						//通过多选框的checked的属性来全选
						items[i].checked=true; 
					}
				}
				//全不选
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function(){
					//获取四个多选框items
					var items = document.getElementsByName('items');
					//遍历items
					for(var i = 0;i<items.length;i++){
						//通过多选框的checked的属性来全选
						items[i].checked=false; 
					}
				}
				//反选
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function(){
					//获取四个多选框items
					var items = document.getElementsByName('items');
					//遍历items
					for(var i = 0;i<items.length;i++){
						//通过多选框的checked的属性来全选
						if(items[i].checked==false){
							items[i].checked=true
						}else{
							items[i].checked=false
						}
					}
				}
				//提交
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					//获取四个多选框items
					var items = document.getElementsByName('items');
					//遍历items
					for(var i = 0;i<items.length;i++){
						//通过多选框的checked的属性来全选
						if(items[i].checked==true){
							alert(items[i].value);
						} 
					}
				}
				//全选/全不选
				var checkedAllbox = document.getElementById("checkedAllbox");
				checkedAllbox.onclick = function(){
					var items = document.getElementsByName('items');
					//设置多选框选中状态
					for(var i = 0;i<items.length;i++){
						//通过多选框的checked的属性来全选
						items[i].checked = checkedAllbox.checked; 
					}
					}
					
				//设置当四个全选中，checkbox应该选中该，否则
				var items = document.getElementsByName('items');
				for(var i = 0;i<items.length;i++){
					//通过多选框的checked的属性来全选
					items[i].onclick = function(){
						checkedAllbox.checked=true;//默认点击一个就显示全选
						for(var j =0;j<items.length;j++){
							if(!items[j].checked){
								checkedAllbox.checked=false;
							}
							}
					}
				
					}
				
					
					
					
					
					//dom剩余查询方法
					
						//获取body
						var body = document.getElementsByTagName('body')[0];
						var body = document.body;
						var html = document.documentElement;
						//查询页面所有元素
						var all = document.all;
						var all = document.getElementsByTagName('div');
						//根据元素的class属性查询一组元素节点信息
						var box1 =document.getElementsByClassName('box1');
						//获取class为box1的所有div
						var div = document.querySelector('.box1 div');
						
						
						
						
						//dom增删改
						//创建一个city节点，添加到广州节点下
						myClick("btn01",function(){
							var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
							//创建广州文本节点
							var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
							//将gztext设置成li的子节点
							li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
							//获取id为city的节点
							var city = document.getElementById('city');
							//将广州添加到city下面
							city.appendChild(li);
						});
						//将广州节点插入到bj前面
						myClick("btn02",function(){
							var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
							//创建广州文本节点
							var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
							//将gztext设置成li的子节点
							li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
							//获取北京节点
							var bj = document.getElementById('bj');
							//获取city
							var city = document.getElementById('city');
							//插入到北京前面,insertbefore参数1新节点，参数二旧节点
							city.insertBefore(li,bj); 
							
							});
							
							//使用广州节点替换北京节点
							myClick("btn03",function(){
								var li = document.createElement("li");//createelement()可以用来创建一个元素节点对象
								//创建广州文本节点 
								var gztext = document.createTextNode('广州');//可以用来创建一个文本对象节点
								//将gztext设置成li的子节点
								li.appendChild(gztext);//appendchilid可以将新建的节点放到一个节点下面
								//获取北京节点
								var bj = document.getElementById('bj');
								//获取city
								var city = document.getElementById('city');
								//替换节点
								city.replaceChild(li,bj);
								});
								
								
							//删除北京节点
							myClick("btn04",function(){
								var bj = document.getElementById("bj");//createelement()可以用来创建一个元素节点对象
								var city = document.getElementById('city');//获取city
								//删除子节点
								// city.removeChild(bj);
								//子节点.parentNode.removeCHild(子节点)
								bj.parentNode.removeChild(bj);
								});
								
							//读取city的代码
							myClick("btn05",function(){
								var city = document.getElementById('city');//获取city
								alert(city.innerHTML);
							});
							//设置BJ内的代码
							myClick("btn06",function(){
								//获取bj
								var bj = document.getElementById('bj');
								bj.innerHTML = "昌平";
							});
								
								
							//向city中添加广州
							var city = document.getElementById('city');
							city.innerHTML +="<li>广州</li>"
						
							//公共的点击响应
						function myClick(idStr,fun){
							var btn = document.getElementById(idStr);
							btn.onclick=fun;
						}
						
						
					
					}
				</script>
	</body>
</html>

图图爱上壮壮妈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础dom全选，操作元素练习

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全选/不选练习</title> </head> <body> <form action="" method="post"> 你爱好的运动是<input name="Checkbox" type="checkbox" id = "checkedAll
复制链接

扫一扫

专栏目录