一、概念

BOM是浏览器对象模型
BOM提供了独立于内容与浏览器进行交互的对象
BOM的核心对象是windows
BOM由一系列相关的对象构成，每个对象都提供了很多方法和属性

在浏览器打开调试窗口，console中输入windows就能看到这个对象，里面有很多方法和属性，能够帮助我们查看和浏览器相关的一些内容； 比如：浏览器版本，历史记录，网站地址信息，屏幕相关内容等

常用方法

定时

  1. <script>
  2.         //表示延时1000毫秒做一件function里面的事情
  3.         // setTimeout(function(){ 
  4.         // },1000)
  6.         // //打印随机数 - 打印一次
  7.         // setTimeout(function(){ 
  8.         //     console.log(Math.random())
  9.         // },1000)
  11.         //周期性的定时器 - 会一直打印
  12.         //setInterval(() => {
  13.         //     console.log(Math.random())
  14.         // }, 1000);
  16.         //clearInterval()清除定时器
  17.         var btn =  document.getElementById("btn");
  18.         var temp = setInterval(function(){
  19.             console.log("2")
  20.         },1000)
  21.         btn.onclick =  function(){
  22.             clearInterval(temp);
  23.         }
  24.     </script>
  25. //周期性的定时器可以做很多事：比如轮播图等

浏览器自带两个小型数据库

为每个网址提供两个小型的数据库
localStorage只要不人为的删除，浏览器的数据会一直在

//增加或修改 window.localStorage.setItem(“name”,”Cherry”) //获取 window.localStorage.getItem(“name”) //删除

  1.     window.localStorage.removeItem("name");

//清空

  1.     window.localStorage.clear();

sessionStorage网页被关闭就没有数据了

方法和上面一样

screen对象包含有关客户端显示屏幕的信息

screen.availWidth screen.availHeight

location.href

location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。

location.href与window.location.href等价 语法：location.hash 功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串

语法：location.host

功能:返回服务器名称和端口号

语法：location.hostname

功能:返回不带端口号的服务器名称

语法：location.pathname

功能：返回URL中的目录和(或)文件名

语法：location.port

功能:返回URL中指定的端口号,如果没有,返回空字符串

  1. <body>
  2.     <button id="btn">跳转到百度</button>
  3.     <script>
  4.         var btn = document.getElementById("btn");
  5.         btn.onclick =  function(){
  6.            console.log(location.port)
  7.         }
  8.     </script>
  9. </body>
  11. ////实现跳转
  12. <body>
  13.     <p>02</p>
  14.     <a href="html/03.html">03.html</a>
  15. </body>

history

history对象保存了用户在浏览器中访问页面的历史记录 - 在控制台输入以下语法可以根据功能控制

语法：history.back()

功能:回到历史记录的上一步

相当于是用了history.go(-1)

//-1表示前一步,-2前两部

语法：history.go(1)

功能:回到历史记录的前一步

相当于history.forward()

语法：history.go(-n)

功能:回到历史记录的前n部

语法:history.go(n)

功能:回到历史记录的后n步

  1. //target="_blank"加上会新开一个界面
  2. //<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a>
  3. //不会新开界面，并且还能返回
  4. <a href="http://www.baidu.com" rel="noopener noreferrer">百度</a>