JS基础学习（八）

最新推荐文章于 2024-08-07 19:32:42 发布

MsStrbig

最新推荐文章于 2024-08-07 19:32:42 发布

阅读量335

点赞数

分类专栏： HTML+CSS 文章标签： dom 前端 javascript

本文链接：https://blog.csdn.net/MsStrbig/article/details/78618892

版权

HTML+CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

DOM查询

1：全选练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">
     window.οnlοad=function(){
 
     	
     	
     	var checkedAllBox=document.getElementById("checkedAllBox");
     	var checkedAllBtn=document.getElementById("checkedAllBtn");
     	checkedAllBtn.οnclick=function(){
     		//当全选的时候选择框都会被选中//；
     		var items=document.getElementsByName("items");
     		for(var i=0;i<items.length;i++)
     		{
     			items[i].checked=true;
     		}
     		checkedAllBox.checked=true;
     		
     		
     		
     	};
     	//全不选
     	var checkedNoBtn=document.getElementById("checkedNoBtn");
     	checkedNoBtn.οnclick=function(){
     		//当全选的时候选择框都会被选中//；
     		var items=document.getElementsByName("items");
     		for(var i=0;i<items.length;i++)
     		{
     			items[i].checked=false;
     		}
     		
     		checkedAllBox.checked=false;
     		
     		
     	};
     	//反选
     	var checkedRevBtn=document.getElementById("checkedRevBtn");
     	checkedRevBtn.οnclick=function(){
     		//当全选的时候选择框都会被选中//；
     		var items=document.getElementsByName("items");
     		checkedAllBox.checked=true;
     		for(var i=0;i<items.length;i++)
     		{
     			items[i].checked=!(items[i].checked);
     			if(items[i].checked==false)
        			 {checkedAllBox.checked=false;
        			 };
     		}
     		
     		
     		
     		
     	};
     	//全选使用checkbox进行选定；
     checkedAllBox.οnclick=function(){
     	var items=document.getElementsByName("items");
     		for(var i=0;i<items.length;i++)
     		{
     			items[i].checked= checkedAllBox.checked
     		};
     	
   
     	
     };
     //全选使用提交按钮；
     var sendBtn=document.getElementById("sendBtn");
     	sendBtn.οnclick=function(){
     		//当全选的时候选择框都会被选中//；
     		var items=document.getElementsByName("items");
     		for(var i=0;i<items.length;i++)
     		{
     			if(items[i].checked)
     			alert(items[i].value);
     		}
     		
     		
     		
     		
     	};	
     	
     	
     	//四个都选中的时候；全选按钮被选中，当有一个没被选中全选不被选中；
     	 var items=document.getElementsByName("items");
        for(i=0;i<items.length;i++)
        {
        	items[i].οnclick=function(){
        		for(j=0;j<items.length;j++)
        		{
        			//只要一个没被选中，全选不被选择
        			if(items[j].checked==false)
        			 {checkedAllBox.checked=false
        			 break;
        			 };
        		}
        		
        		if(j>=items.length)
        		{
        			checkedAllBox.checked=true;
        		}
        		
        		
        	}
        	
        	
        	
        	
        }
     	
     	
     	
     	
     };






	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<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="提　交" />
	</form>
</body>
</html>

2：DOM查询的其他方法

//dom查询的其他方法

1:查询body元素在document中有一个body属性专门用来表示body元素；

2:查询html元素在document中有一个documentElement属性专门用来表示html元素;

varht=document.documentElement;

console.log(ht);//objectHTMLHtmlElement

3:查询全部元素在document中有一个all属性专门用来表示所有元素;

var all=document.all;

console.log(all.length);

4:通过CLASS属性来获取元素

varbox1=document.getElementsByClassName("box1");//不兼容IE8不推荐使用；

console.log(box1[0]);