第十二讲_JavaScript浏览器对象模型BOM

news2024/10/7 12:21:05

JavaScript浏览器对象模型BOM

1. 浏览器对象模型介绍
2. location
- 2.1 常用的属性
- 2.2 常用的方法
3. navigator
- 3.1 常用的属性
4. history
- 4.1 常用的方法：
5. 本地存储

1. 浏览器对象模型介绍

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

在这里插入图片描述

2. location

location对象包含有关文档当前位置的信息

2.1 常用的属性

href：完整的 url 地址，对其赋值时用于地址的跳转。
search：获取地址中携带的参数，符号？后面的部分。
hash：获取地址中哈希值，符号#后面的部分。

<html>

  <style>
    div {
      text-align: center;
    }
  </style>

  <div>测试location对象</div>
  <div>
    <button class="btn1">点击跳转页面</button>
    <button class="btn2">点击获取url参数</button>
    <button class="btn3">点击获取url哈希值</button>
  </div>

  <script>
    const btn1 = document.querySelector(".btn1");

    btn1.addEventListener('click', () => {
      // 设置新的href，跳转到新的地址网页
      location.href = "https://blog.csdn.net/wenqi1992?spm=1010.2135.3001.5343"
    })

    // 点击前，在浏览器地址栏后面添加一串?XXXXXX，然后刷新页面，最后点击按钮
    const btn2 = document.querySelector(".btn2");
    btn2.addEventListener('click', () => {
      alert(location.search)
    })

    // 点击前，在浏览器地址栏后面添加一串#XXXXXX，然后刷新页面，最后点击按钮
    const btn3 = document.querySelector(".btn3");
    btn3.addEventListener('click', () => {
      alert(location.hash)
    })
  </script>
  
</html>

2.2 常用的方法

reload()：刷新当前页面方法，传入 true 表示强制刷新。
replace()：替换当前地址并刷新页面。

3. navigator

navigator对象记录了浏览器自身的相关信息。

3.1 常用的属性

userAgent：浏览器的平台和版本信息。

<html>
  <style>
    div {
      text-align: center;
    }
  </style>


  <div>测试navigator对象</div>

  <div>
    <button class="btn1">点击查看浏览器的信息</button>
  </div>

  <script>
    const btn1 = document.querySelector(".btn1");

    btn1.addEventListener('click', () => {
      alert(navigator.userAgent)
    })
  </script>
</html>

4. history

history对象主要管理历史记录，该对象与浏览器地址栏的操作相对应。

4.1 常用的方法：

back()：后退
forward()：前进
go()：前进后退，参数大于 0 就是前进，参数小于 0 就是后退。

5. 本地存储

localStorage：本地存储数据，除非手动删除。
sesseionStorage：本地存储数据，会话关闭就删除。

<html>
  <style>
    div {
      text-align: center;
    }
  </style>


  <div>测试locationStorage和sessionStorage对象</div>

  <div>
    <button class="btn1">点击保存到locationStorage</button>

    <button class="btn2">点击保存到sessionStorage</button>
  </div>

  <script>
    const btn1 = document.querySelector(".btn1");
    btn1.addEventListener('click', () => {
      localStorage.setItem("name", "文大奇Quiin")
    })

    const btn2 = document.querySelector(".btn2");
    btn2.addEventListener('click', () => {
      sessionStorage.setItem("name", "文大奇Quiin")
    })
  </script>
  
</html>