JavaScript—BOM

概念

BOM(Browser Object Model)是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BdM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。

Window对象

Window是浏览器的顶级对象，调用Window下的属性和方法时，可以省略Window

Window对象

// 场景1
        let obj = {
            name: 'example',
            fx: function () {
                console.log(this)
            }
        }
        let temp = obj.fx
        temp()      // window.temp()
// 场景2
        function f() {
            return function () {
                console.log(this);
            }
        }
        window.f()()
// 场景3-内置函数
        window.alert("000")
        prompt("01")

定时器

setInterval与setTimeout

         let time = setInterval(function () {
            let date = new Date()
            document.querySelector("#time").innerHTML = date.toLocaleString()
        }, 1000)
        document.querySelector("#btn").onclick = function () {
            window.clearInterval(time)
        }
        setTimeout(function () {
            let date = new Date()
            document.querySelector("#time").innerHTML.toLocaleString()
        }, 10000)

onload加载

方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

查看代码

// document.querySelector("#bg").style.backgroundColor = "#F00";
        window.onload = function () {
            document.querySelector("#bg").style.backgroundColor = "#F00";
        }

location

查看代码

 <input type="button" value="跳转" id="btn"/>
<script>
  //对象中的属性和方法
  //location对象
  console.log(window.location);
  //地址栏上#及后面的内容(包括#)
  console.log(window.location.hash);
  //主机名及端口号
  console.log(window.location.host);
  //主机名
  console.log(window.location.hostname);
  //文件的路径---相对路径
  console.log(window.location.pathname);
  //端口号
  console.log(window.location.port);
  //协议
  console.log(window.location.protocol);
  //搜索的内容 ?后面
  console.log(window.location.search);

  onload=function () {
    document.querySelector("#btn").onclick=function () {
      //设置跳转的页面的地址
      location.href="http://www.baidu.com";//属性----------------->必须记住
      //location.reload();//重新加载--刷新
      //location.replace("http://www.baidu.com");//没有历史记录
    };
  };

</script>

历史histry

前进

  <a href="history后退.html">跳转</a>
    <input type="button" value="前进" id="btn" />
    <script>
        document.querySelector("#btn").onclick = function () {
            window.history.forward();
        }
    </script>

后退

<input type="button" value="后退" id="btn"/>
<script>
    document.querySelector("#btn").onclick=function () {
        window.history.back();
    }
</script>

本地存储localStorage

查看代码

   <input type="button" value="获取本地存储数据" id="btn" />
  <script>
    window.onload = function () {
      window.localStorage.setItem("stu", JSON.stringify({ id: 1, name: "jack" }))
    }
    document.querySelector("#btn").onclick = function () {
      let stu = JSON.parse(localStorage.getItem("stu"))
      console.log(stu);
    }