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

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的顶层对象,其他对象都是该对象的子对象。

第十二讲_JavaScript浏览器对象模型BOM_第1张图片

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">点击保存到locationStoragebutton>

    <button class="btn2">点击保存到sessionStoragebutton>
  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>

第十二讲_JavaScript浏览器对象模型BOM_第2张图片
第十二讲_JavaScript浏览器对象模型BOM_第3张图片

复杂数据类型存储,需要先用 JSON.stringify(obj)转换成 JSON 字符串。取回来的 JSON 字符串,可以用 JSON.parse(jsonStr)转换成对象。

你可能感兴趣的:(JavaScript,javascript,开发语言)