7.JavaScriptDOM对象_在浏览器的dom中,根对象是window还是wodows-优快云博客

本文深入探讨了浏览器对象模型(BOM)与文档对象模型(DOM)的核心概念，包括window对象的功能与使用，如alert、confirm、prompt等方法，以及location、history、screen和navigator对象的应用。同时，讲解了如何通过BOM进行页面跳转、刷新和历史记录操作，以及如何获取屏幕和浏览器信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、windows对象

1.BOM（浏览器对象模型）

2.window

  <script type="text/javascript">
   var age=15;
   function sayAge(){
    alert("我"+age);
   }
   //声明一个全局变量
   window.username="marry";  //var username="marry";
   window.sayName=function(){
    alert("我是"+this.username);
   }
   sayAge();
   window.sayName();
  </script>

在这里插入图片描述

alert

语法：window.alert(“content”);
功能：显示带有一段消息和一个确认按钮的警告框

confirm

window.confirm(“message”);
显示带有指定消息和ok及取消按钮的对话框

 <div id="box" class="box">
  <span>iphone6s</span>
  <input type="button" name="删除" id="btn" value="删除">
 </div>
  <script type="text/javascript">
   var btn=document.getElementById("btn");
   btn.onclick=function(){
    var result=window.confirm("确定删除吗？");
    if(result){
     document.getElementById("box").style.display="none";
    }
   }
  </script>

prompt

在这里插入图片描述

   var message=prompt("请输入星座：","天蝎座");
   console.log(message);

在这里插入图片描述

open

 <h1>hello window.open</h1>
  <script type="text/javascript">
  window.onload=function(){
   //打开了窗口，显示newwindow.html
   window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
  }
  </script>

在这里插入图片描述

close

在这里插入图片描述

 <input type="button" value="退出" id="quit">
 <script type="text/javascript">
	  window.onload=function(){
	   //打开了窗口，显示newwindow.html
  	  window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
	  }
	  var quit=document.getElementById('quit');
	  //点击关闭当前窗口
	  quit.onclick=function(){
	  window.close();
	  }
</script>

3.超时调用：

在这里插入图片描述

  <script type="text/javascript">
 	  //setTimeout("alert('hello')",4000);
 	  setTimeout(function(){
 	   alert("hello");
	   },2000)   //2000ms以后弹出
  </script>

setTimeout方法返回一个ID值，可以通过它取消超时调用。

clearTimeout

在这里插入图片描述

setInterval

在这里插入图片描述

  <script type="text/javascript">
   var intervalId=setInterval(function(){
    console.log("123");
   },1000);//一秒钟打印一次
   //十秒钟后停止打印
   setTimeout(function(){
    clearInterval(intervalId);
   },10000);
  </script>

4.清除间歇调用

在这里插入图片描述

  <script type="text/javascript">
   var intervalId=setInterval(function(){
    console.log("123");
   },1000);//一秒钟打印一次
   //十秒钟后停止打印
   setTimeout(function(){
    clearInterval(intervalId);
   },10000);
  </script>

在这里插入图片描述

练习：

  <script type="text/javascript">
   var num=1,
    max=10,
    timer=null;  //释放内存
    //每隔一秒钟number递增一次，直到num的值=max清除。
   timer=setInterval(function(){
    num++;
    if(num>=max){
     clearInterval(timer);
    }
    console.log(num);
   },1000);
  </script>

使用超时调用实现：

   var num=1,
    max=10,
    timer=null;  //释放内存
    //每隔一秒钟number递增一次，直到num的值=max清除。
   function inCreamentNum(){
    console.log(num);
    num++;
    if(num<=max){
     setTimeout(inCreamentNum,1000);
    }
    else{
     clearTimeout(timer);
    }
   }
   timer=setTimeout(inCreamentNum,1000);

在这里插入图片描述

二、location对象

1.href hash

<!DOCTYPE html>
<html>
<head>
 <title>LOCATION</title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css">
   .box1{
    height: 400px;
    background:#ccc;
   }
   .box2{
    height: 600px;
    background-color: #666;
   }
  </style>
</head>
<body>
 <div class="box1" id="top"></div>
 <div class="box2"></div>
 <input type="button" id="btn" value="返回顶部">
 <script type="text/javascript">
  console.log(location.hash);
  var btn=document.getElementById("btn");
  btn.onclick=function(){
   location.hash="#top";
  }
 </script>
</body>
</html>

点击“返回顶部”，即找到id为“top”的位置，并且地址栏多了“#top”

2.host hostname pathname

在这里插入图片描述

3.port protocol search

在这里插入图片描述

4.replace

在这里插入图片描述

5.reload

在这里插入图片描述

6.位置操作

 <script type="text/javascript">
  setTimeout(function(){
   //location.href="falling.html";
   window.location="falling.html";
   //跳转到“falling.html”
   location.replace("falling.html");
   //不会生成回退按钮；
  },1000);//一秒钟后跳转
  document.btn("btn").onclick=function(){
   locaction.reload();
   //页面刷新
  }
 </script>

三、history

保留了用户在浏览器中访问页面的一个记录

1.back go

urie.html

<a href="lucky.html">hi</a>

在这里插入图片描述
lucky.html

 <script type="text/javascript">
  var btn=document.getElementById("btn")
  btn.onclick=function(){
   history.back();
   //history.go(-1); //-1可以选择跳转页面
  }
 </script>

在这里插入图片描述可以来回跳转

2.forward

在这里插入图片描述

四、Screen

 <script type="text/javascript">
  console.log("页面宽："+screen.availWidth);
  console.log("页面高："+screen.availHeight);
  //是除去状态栏的屏幕大小
  console.log("pageWidth："+window.innerWidth);
  console.log("pageHeight："+window.innerHeight);
 </script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200410231216

五、Navigator

1.userAgent

用于识别浏览器名称、版本、引擎以及操作系统等信息的内容。

  var explorer=navigator.userAgent;
  alert(explorer);

在这里插入图片描述

 <script type="text/javascript">
  function getBrowser(){
   var explorer=navigator.userAgent.toLowerCase(),browser;
   if(explorer.indexOf("msie")>-1){
    browser="IE";
   }
   else if (explorer.indexOf("chrome")>-1){
    browser="chrome";
   }
   else if (explorer.indexOf("opera")>-1){
    browser="opera";
   }
   return browser;
  }
  var explorer=getBrowser();
  alert("您当前使用的是："+explorer+"浏览器");
 </script>