【JavaScript知识点】常见的BOM操作

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

• BOM（Browser Object Model）： 浏览器对象模型，其实就是操作浏览器的一些能力，我们可以操作以下内容：
  • 获取一些浏览器的相关信息（窗口的大小）
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息（浏览器的版本）
  • 让浏览器出现一个弹出框（alert / confirm / prompt）
  • …
• BOM 的核心就是 window 对象
• window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

2.获取浏览器窗口的尺寸

    var h = window.innerHeight;//高度
    console.log(h);
    var w = window.innerWidth;//宽度
    console.log(w);

3.浏览器的 onload 事件

• 是在页面所有资源加载完毕后执行的一个事件

  window.onload = function () {
  console.log("页面已经加载完毕");
  };

4.浏览器滚动的距离

• 浏览器是没有滚动的，而是我们的页面
• 所以不是在用 window 对象了，而是使用 document 对象

    <div style="height: 300px; width: 100px"></div> //把按钮顶到下面
    <button id="btn"></button>
    <script>
      window.onscroll = function () {
        if (document.documentElement.scrollTop > 200) {
          console.log("1111"); //如果滚动条大于200打印1111
        } else {
          console.log("2222");
        }
      };
      btn.onclik = function () { //点击按钮回到滚动条顶端
        window.scrollTo(0, 0);
      };

5.浏览器的历史记录

• 01.html

  <a href="02.html">到下一页面</a>
  <button id="btn1">前进</button>
    <script>
      btn1.onclick = function () {
        //location.href = "02.html"; //前进到02.htnl
        // history.forward(); //前进到下一页面
        history.go(1); //前进到下一页面
      }

• 02.html

  <button id="btn2">回退</button>
   <script>
     btn2.onclick = function () {
       // history.back(); //回到上一页面
       history.go(-1); //回到上一页面
     };
   </script>

6.本地存储

• 永久存储localStorage

  <button id="btn1">存储</button>
  <button id="btn2">取出</button>
  <button id="btn3">删除</button>
  <button id="btn4">全部清除</button>
    <script>
      //只能存字符串，不能存对象
      btn1.onclick = function () {
        // localStorage.setItem("age", "2222");
        //不能存对象，但可以转换成JSON模式，用stringify()转换为字符串
        localStorage.setItem("obj", JSON.stringify({ name: "111", age: 13 }));
      };
      btn2.onclick = function () {
        console.log(localStorage.getItem("obj")); //获取存储
      };
      btn3.onclick = function () {
        localStorage.removeItem(""); //删除
      };
      btn4.onclick = function () {
        localStorage.clear(); //清空
      };

• 会话存储 sessionStorage,关闭页面就丢失

  <button id="btn1">存储</button>
  <button id="btn2">取出</button>
  <button id="btn3">删除</button>
  <button id="btn4">全部清除</button>
    <script>
      //只能存字符串，不能存对象
      btn1.onclick = function () {
        sessionStorage.setItem("obj", JSON.stringify({ name: "111", age: 13 }));
      };
      btn2.onclick = function () {
        console.log(sessionStorage.getItem("obj")); //获取存储
      };
      btn3.onclick = function () {
        sessionStorage.removeItem("obj"); //删除
      };
      btn4.onclick = function () {
        sessionStorage.clear(); //清空
      };