JavaScript 对象学习-摩杜云开发者社区

文章目录

window对象
document 对象
- document 对象属性
- document 对象方法

window对象

一个浏览器窗口就是一个 window 对象
window 子对象

子对象	说明
$d o c u m e n t$	文档对象，用于操作页面元素
$l o c a t i o n$	地址对象，用于操作 `URL` 地址
$n a v i g a t o r$	浏览器对象，用于获取浏览器版本信息
$h i s t o r y$	历史对象，用于操作浏览历史
$s c r e e n$	屏幕对象，用于操作屏幕宽度高度

一个窗口就是一个 window 对象，这个窗口里面的 HTML 文档就是一个 document 对象，document 对象是 window 对象的子对象

window 对象常用方法

方法	说明
$a l e r t ()$	提示对话框
$c o n f i r m ()$	判断对话框
$p r o m p t ()$	输入对话框
$o p e n ()$	打开窗口
$c l o s e ()$	关闭窗口
$s e t T i m e o u t ()$	开启 “一次性” 定时器
$c l e a r T i m e o u t ()$	关闭 “一次性” 定时器
$s e t I n t e r v a l ()$	开启 “重复性” 定时器
$c l e a r I n t e r v a l ()$	关闭 “重复性” 定时器

打开窗口

window.open(url, target);//target默认为_blank(新窗口打开), target为_self 时表示在当前窗口打开

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    <input type="button" value="打开新窗口" />
    <input type="button" value="操作新窗口" />
	
	<script> window.onload = function () {
        
           var oBtn = document.getElementsByTagName("input"); var opener = null; oBtn[0].onclick = function () {
        
           opener = window.open(); var strHtml = '<div>小心偷影子的人，他会带走你的心。</div>'; opener.document.write(strHtml); }; oBtn[1].onclick = function () {
        
           var oDiv = opener.document.getElementsByTagName("div")[0]; oDiv.style.fontWeight = "bold"; oDiv.style.color = "hotpink"; }; } </script>
</body>
</html>

关闭窗口

window.close()  //无参数

对话框

alert()：仅提示文字，无返回值

alert("提示文字");

confirm()

confirm 不仅提示文字，还提供确认，返回布尔值

confirm("提示文字");

prompt()

prompt()：不仅显示提示文字，还返回一个字符串

prompt("提示文字")

定时器

setTime() && clearTimeout()

setTimeout(code, time); //执行一次

code 是一段代码，一个函数，也可以是函数名
time 是时间，单位为毫秒，表示经过多长时间才执行 code 中的代码

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
	<p>点击开始按钮，2秒后开始欢迎</p>
    <input type="button" value="开始" />
    <input type="button" value="暂停" />
	
	<script>
	    window.onload = function () 
	    {
      
        
	        var oBtn = document.getElementsByTagName("input");
	        var timer = null;  //存放定时器
	        oBtn[0].onclick = function () 
	        {
      
        
	            timer = setTimeout(function(){
      
        
					alert("欢迎欢迎");
				}, 2000);
	        };
	        oBtn[1].onclick = function () 
	        {
      
        
	            clearTimeout(timer);
	        };
	    }
	</script>
</body>
</html>

setInterval() && clearInterval()

setInterval(code, time); //执行多次

倒计时效果

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
	<p>倒计时：<span id="num">5</span></p>
	<script> var n = prompt(); window.onload = function () {
        
           var t = setInterval(countdown, 1000); //设置定时器 } function countdown(){
        
           if(n > 0){
        
           n--; document.getElementById("num").innerHTML = n; } } </script>
</body>
</html>

背景颜色替换

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
	<style type="text/css"> div{
        
          width: 100px; height: 100px; border: 1px solid silver;} </style>
</head>
<body>
	<input type="button" value="开始" />
	<input type="button" value="暂停" />
	<div></div>
	<script> window.onload = function () {
        
           var obtn = document.getElementsByTagName("input"); var odiv = document.getElementsByTagName("div")[0]; // 定义一个数组存放六种颜色 var colors = ["red", "orange", "yellow", "green", "blue", "purple"]; var timer = null; var i = 0; obtn[0].onclick = function() {
        
           clearInterval(timer); timer = setInterval(function(){
        
           odiv.style.backgroundColor = colors[i]; i++; i = i%colors.length; }, 1000); }; obtn[1].onclick = function() {
        
           clearInterval(timer); }; } </script>
</body>
</html>

location 对象

属性	说明
$h r e f$	当前页面地址
$s e a r c h$	当前页面地址 “?” 后面的内容
$h a s h$	当前页面地址 “#” 后面的内容

window.location.href  //获取或设置当前页面的地址

window.location.search  //获取和设置当前页面地址

window.location.hash; //获取和设置当前页面地址#后面的内容 #一般用于锚点链接

navigator 对象

navigator 获取浏览器的类型

window.navigator.userAgent;

document 对象

document 对象属性

属性	说明
$d o c u m e n t . t i t l e$	获取文档的 $t i t l e$
$d o c u m e n t . b o d y$	获取文档的 $b o d y$
$d o c u m e n t . f o r m s$	获取所有的 $f o r m$ 元素
$d o c u m e n t . i m a g e s$	获取所有的 $i m g$ 元素
$d o c u m e n t . l i n k s$	获取所有 $a$ 元素
$d o c u m e n t . c o o k i e$	文档的 $c o o k i e$
$d o c u m e n t . U R L$	当前文档的 $U R L$
$d o c u m e n t . r e f e r r e r$	返回使浏览者到达当前文档的 $U R L$

document 对象方法

方法	属性
$d o c u m e n t . g e t E l e m e n t B y I d ()$	通过 $i d$ 获取元素
$d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ()$	通过标签名获取元素
$d o c u m e n t . g e t E l e m e n t s B y C l a s s N a m e ()$	通过 $c l a s s$ 获取元素
$d o c u m e n t . g e t E l e m e n t s B y N a m e ()$	通过 $n a m e$ 获取元素
$d o c u m e n t . q u e r r y S e l e c t o r ()$	通过选择器获取元素，只获取第一个
$d o c u m e n t . q u e r y S e l e c t o r A l l ()$	通过选择器获取元素，获取所有
$d o c u m e n t . c r e a t e E l e m e n t ()$	创建元素节点
$d o c u m e n t . c r e a t e T e x t N o d e ()$	创建文本节点
$d o c u m e n t . w r i t e ()$	输出内容
$d o c u m e n t . w r i t e l n ()$	输出内容并换行