javascript常用内置对象、Window、History、Location、Document

getElementsByName()根据name属性值来获取标签对象，因为name属性值是可以重复的，所以获取到的是数组。getElementsByTagName()根据标签名来获取标签对象，因为标签名是可以重复的，所以获取到的是数组！Window对象表示浏览器正在打开的这个窗口。Window对象是顶级对象，可以省略。history对象常用的方法。......

奇奇的java

1091人浏览 · 2022-07-26 01:42:44

奇奇的java · 2022-07-26 01:42:44 发布

js组成

在这里插入图片描述

js常用内置对象

Window、History、Location、Document

在这里插入图片描述

Window对象

Window对象表示浏览器正在打开的这个窗口

Window对象是顶级对象，可以省略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js中的定时器</title>
		<script>
			//定义函数
			  function  show(){			  	
			  Window.alert("你好");	//Window可以直接省略
			  //直接写
			  alert('你好');
			  }			 
			 } 
		</script>
	</head>
	<body>	
	</body>
</html>

Window对象常用方法

在这里插入图片描述

confirm( ):确认取消框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function de(s){
				
				var m=window.confirm("你要离开我吗!");
				if(m==2){
					alert('正在删除');
					
				}else{
					alert('正在取消');
					
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" value="删除" onclick="de()" />
	</body>
</html>

在这里插入图片描述

close( ): 关闭当前网页窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function col(){
				
				var m=window.confirm("你要离开我吗!");
				if(m==true){
					window.close()//关闭窗口
				}
			}
			
			
		</script>
	</head>
	<body>
		<input type="button" value="关闭" onclick="col()" />
	</body>
</html>

在这里插入图片描述

open( ): 打开一个窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function app(){
				
				 window.open("https://blog.csdn.net/m0_67929156");//打开路径配置
			
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开" onclick="app()"/>
	</body>
</html>

History对象

history对象常用的方法

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function bak(){
				//alert(1);
				
				var m=window.history.back(); //后退
				
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="后退" onclick="bak()"/>
	</body>
</html>

location对象

常用属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function bak(){
				
			var h1=window.location.host;
			var h2=window.location.hostname;
			var h3=window.location.href;
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="查看" onclick="bak()"/>
	</body>
</html>

在这里插入图片描述

常用方法

在这里插入图片描述
reload();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function shunx(){
				
			window.location.reload();//刷新网页
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="查看" onclick="shunx()"/>
	</body>
</html>

replace():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js内置对象</title>
		<script>
			function shunx(){
				
			window.location.replace("http://www.baidu.com");//替换文档或者跳转地址
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="跳转" onclick="shunx()"/>
	</body>
</html>
片

Document对象（`重要`）

常用方法:

在这里插入图片描述
getElementById():获取唯一的id:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var size=20;
			//函数
			function dian(){
				var a=document.getElementById("d2"); //获取id为d2按钮
				a.value="南方";
				a.style.backgroundColor="yellow";
				a.style.fontFamily="楷体";
				a.style.fontSize=size+"px";
				size=size+10;
			}
		</script>
	</head>
	<body>
		
		<input type="button" value="东" id="d1"/>
		<input type="button" value="南" id="d2" />
		<input type="button" value="西" />
		<input type="button" value="北" />
		
		<input type="button" value="中" onclick="dian();"/>
		
	</body>
</html>

在这里插入图片描述

getElementsByName() 根据name属性值来获取标签对象，因为name属性值是可以重复的，所以获取到的是数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//全选
			function dian(){
				var s=document.getElementById("d1").checked; //获取全选按钮状态 
				
				var childs=document.getElementsByName("aihao"); //获取子标签数组
				for(var i=0;i<childs.length;i++){
					childs[i].checked=s;
				}
			}
			
		</script>
	</head>
	<body>
		<input type="checkbox" onclick="dian();" id="d1"/>全选
		<hr />
		<input type="checkbox" name="aihao"/> 吃饭<br/>
		<input type="checkbox" name="aihao"/> 睡觉<br/>
		<input type="checkbox" name="aihao"/> 游戏<br/>
		<input type="checkbox" name="aihao"/> 电影<br/>
		<input type="checkbox" name="aihao"/> 购物<br/>
		<input type="checkbox" name="aihao"/> 麻将<br/>
		<input type="checkbox" name="aihao"/> 跑步<br/>
	</body>
</html>

getElementsByTagName() 根据标签名来获取标签对象，因为标签名是可以重复的，所以获取到的是数组！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function dian(){
				var inputs=document.getElementsByTagName("input");//获取所有的input标签
				for(var i=0;i<inputs.length;i++){
					inputs[i].style.backgroundColor="yellow";
				}
			}
		</script>
	</head>
	<body>
		<input type="text" value="哈哈"/>
		<input type="button" value="嘿嘿"/>
		<input type="button" value="嘻嘻"/>
		<input type="button" value="你好"/>
		<input type="button" value="点击" onclick="dian();"/>
	</body>
</html>