JavaScript中的BOM操作

GIS小小白

已于 2023-12-08 14:39:06 修改

阅读量64

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript vue.js

于 2023-11-18 19:10:33 首次发布

本文链接：https://blog.csdn.net/weixin_73810008/article/details/134478029

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.BOM及window介绍

BOM (Browser Object Model ) 是浏览器对象模型

window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

二.定时器-延迟函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

语法：

setTimeout(回调函数, 延迟时间)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window

清除延时函数：

let timerId = setTimeout()

clearTimeout(timerId)

注意点

延时函数需要等待,所以后面的代码先执行
返回值是一个正整数，表示定时器的编号

三.location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分，它是一个对象

属性/方法	说明
href	属性，获取完整的 URL 地址，赋值时用于地址的跳转
search	属性，获取地址中携带的参数，符号？后面部分
hash	属性，获取地址中的啥希值，符号 # 后面部分
reload()	方法，用来刷新当前页面，传入参数 true 时表示强制刷新

四.navigator对象

navigator是对象，该对象下记录了浏览器自身的相关信息,比如下载了上面插件，所处位置等

五.histroy对象(了解即可)

history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等

<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // histroy对象

    // 1.前进
    const forward = document.querySelector('.forward')
    forward.addEventListener('click', function () {
      // history.forward() 
      history.go(1)
    })
    // 2.后退
    const back = document.querySelector('.back')
    back.addEventListener('click', function () {
      // history.back()
      history.go(-1)
    })
  </script>
</body>

六.本地存储

localStorage 可以被认为是 BOM（浏览器对象模型）操作的一部分。虽然 localStorage 并不是 BOM 的核心组件，但它确实是现代浏览器提供的一种 Web 存储机制，允许网站在用户的本地计算机上存储数据。

A.localStorage

注意：a.可以将数据永久存储在本地，除非手动删除，刷新页面和关闭页面，数据也不会丢失

b.只能存储字符串数据类型

1.存储方式

localStorage.setItem('键'，'值')

localStorage.setItem('name', '龟')

2.存储查看方式

3.获取方式

localStorage.getItem('键')

console.log(localStorage.getItem('name')); //龟

4.删除方法

localStorage.removeItem('键')

localStorage.removeItem('name')

5.更改方式

localStorage.setItem('键','新值') 如果原来有这个键，则是改，如果没有这个键是增

localStorage.setItem('name', '牛')

B.sessionStorage

1.生命周期为关闭浏览器窗口

2.在同一个页面下数据可以共享

3.以键值对的形式存储

4.用法和localStorage基本相同

C.本地存储复杂数据类型

复杂数据类型必须转换为JSON字符串存储,其中JSON对象的属性和值有双引号

const obj = {

name: '李元霸',

age: 20,

sex: '男'

}

localStorage.setItem('obj', JSON.stringify(obj))

console.log(localStorage.getItem('obj')); //{"name":"李元霸","age":20,"sex":"男"}

如果是想取到这个对象

那么就用