Happy Place
柳逸尘
2022-08-24
目录

JavaScript中的BOM操作

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

# BOM：浏览器对象模型（Browser Object Model）

  • 简称 BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象
  • 比如navigator、location、history等对象

image

JavaScript有一个非常重要的运行环境就是浏览器；而且浏览器本身又作为一个应用程序需要对其本身进行操作；所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）；可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。

# BOM主要包括以下的对象模型

  • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法
  • location：浏览器连接到的对象的位置（URL）
  • history：操作浏览器的历史
  • navigator：用户代理（浏览器）的状态和标识（很少用到）
  • screen：屏幕窗口信息（很少用到）

# window对象

window对象在浏览器中可以从两个视角来看待

  • 视角一：全局对象
    • ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global
    • 在浏览器中就是window对象
  • 视角二：浏览器窗口对象
    • 作为浏览器窗口时，提供了对浏览器操作的相关的API
  • 这两个视角存在大量重叠的地方，所以不需要刻意去区分它们
    • 事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代浏览器都支持它
    • 放在window对象上的所有属性都可以被访问
    • 使用var定义的变量会被添加到window对象中
    • window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等

# window对象的作用

# window对象上肩负的重担是非常大的

  • 包含大量的属性，localStorage、console、location、history、screenX、scrollX等等（大概60+个属性）

  • 包含大量的方法，alert、close、scrollTo、open等等（大概40+个方法）

  • 包含大量的事件，focus、blur、load、hashchange等等（大概30+个事件）

  • 包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法

  • 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

# window常见的属性

// 浏览器高度
console.log(window.outerHeight)
console.log(window.innerHeight)

console.log(window.screenX)
console.log(window.screenY)

// window监听
window.addEventListener('scroll', (event) => {
    console.log(window.scrollY)
    console.log(window.scrollX)
})
1
2
3
4
5
6
7
8
9
10
11
12

# Window 常见方法

const closeBtn = document.querySelector('#close')
closeBtn.onclick = function(){
    close()  // 只能关闭由open方法打开的窗口
}

const scrollBtn = document.querySelector('#scroll')
scrollBtn.onclick = function(){
    scrollTo({top: 1000})
}

const openBtn = document.querySelector('#open')
openBtn.onclick = function(){
    open('./abount.html','_self')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Window常见的事件

window.onfocus = function(){
    console.log('窗口获取到焦点')
}
window.onblur = function(){
    console.log('窗口失去焦点')
}
window.onload = function(){
    console.log('页面加载完成')
}

const hashBtn = document.querySelector('#hash')
hashBtn.onclick = function(){
    location.href='aaa'
}
window.onhashchange = function(){
    console.log('hasn被修改了')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# location对象常见的属性

location对象用于表示window上当前链接到的URL信息

常见的属性

  • href: 当前window对应的超链接URL, 整个URL
  • protocol: 当前的协议
  • host: 主机地址
  • hostname: 主机地址(不带端口)
  • port: 端口
  • pathname: 路径
  • search: 查询字符串
  • hash: 哈希值
  • username：URL中的username（很多浏览器已经禁用）
  • password：URL中的password（很多浏览器已经禁用）

# Location对象常见的方法

location其实是URL的一个抽象实现

# location有如下常用的方法

  • assign：赋值一个新的URL，并且跳转到该URL中
  • replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）
  • reload：重新加载页面，可以传入一个Boolean类型
const locationBtn = document.querySelector('#location')
locationBtn.onclick = function(){
    location.assign('http://www.baidu.com')
    location.replace('http://www.baidu.com')
    location.reload()
}
1
2
3
4
5
6

# URLSearchParams

URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串，例如

  • 将一个字符串转化成URLSearchParams类型
  • 将一个URLSearchParams类型转成字符串
var urlsearch = new URLSearchParams('name=zs&age=18&height=1.8')
console.log(urlsearch.get('name')) // zs
console.log(urlsearch.toString)  // name=zs&age=18&height=1.8
1
2
3

# URLSearchParams常见的方法

中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

# history对象常见属性和方法

history对象允许我们访问浏览器曾经的会话历史记录。有两个属性

  • length：会话中的记录条数
  • state：当前保留的状态值

五个方法

  • back()：返回上一页，等价于history.go(-1)
  • forward()：前进下一页，等价于history.go(1)
  • go()：加载历史中的某一页
  • pushState()：打开一个指定的地址
  • replaceState()：打开一个新的地址，并且使用replace

history和hash目前是vue、react等框架实现路由的底层原理

console.log(history.length)
console.log(history.state)

const jumpBtn = document.querySelector('#jump')
const backBtn = document.querySelector('#back')

jumpBtn.onclick = function(){
    history.pushState({name:'zs'},'11','aaa')
    console.log(history.length, history.state)
}

backBtn.onclick = function(){
    history.back()
    console.log(history.length, history.state)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

navigator 对象表示用户代理的状态和标识等信息

image

# screen对象（很少使用）

screen主要记录的是浏览器窗口外面的客户端显示器的信息，比如屏幕的逻辑像素 screen.width、screen.height

image

# JSON

目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。

JSON的全称是JavaScript Object Notation（JavaScript对象符号）

JSON使用的场景

  • 网络数据的传输JSON数据
  • 项目的某些配置文件
  • 非关系型数据库（NoSQL）将json作为存储格式

# 其它数据传输格式

  • XML：较早的数据格式，被JSON代替
  • Protobuf：在网络传输中越来越多使用，将来可能要代替JSON

# JSON基本语法

JSON的顶层支持三种类型的值

  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型
  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值
  • 数组值：数组的值可以是简单值、对象值、数组值

# JSON序列化

某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串，这样方便对其进行处理。如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果。

# JSON序列化方法

在ES5中引用了JSON全局对象，该对象有两个常用的方法

  • stringify方法：将JavaScript类型转成对应的JSON字符串
  • parse方法：解析JSON字符串，转回对应的JavaScript类型

# Stringify的参数replace

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，

  • 如果指定了一个 replacer 函数，则可以选择性地替换值
  • 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性
var objJSONString = JSON.stringfy(obj, function(key, value) {
    if(key === 'name'){
        return 'zs'
    }
    return value
})
// 将JSON中key是name的值改为zs
1
2
3
4
5
6
7

# Stringify的参数space

如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果

var objJSONString = JSON.stringfy(obj, null, 4) // 这里第三个参数代表的是 space ，让JSON字符串格式化更易读
1

# 如果对象本身有显式的toJSON方法，那么json.stringfy会直接调用toJSON方法

var obj ={
    name: 'zs',
    toJSON: function(){
        return "123"
    }
}
var objJSONString = JSON.stringfy(obj)
console.log(objJSONString)
1
2
3
4
5
6
7
8

# parse方法

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象；提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)

JSON的方法可以帮我们实现对象的深拷贝

json在解析的过程中也可以对原本的对象做修改

var obj = {
    name:'zs',
    age: 18
}

var objJSONString = JSON.stringfy(obj)
console.log(objJSONString)

var newObj = JSON.parse(objJSONString, function(key, value){
    if(key === 'age'){
        return value + 2
    }
    return value
})
console.log(newObj)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式

  • localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留
  • sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除

# localStorage和sessionStorage的区别

  • 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除
  • 在页面内实现跳转，localStorage会保留，sessionStorage也会保留
  • 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留

# Storage常见的方法和属性

属性

  • Storage.length：只读属性， 返回一个整数，表示存储在Storage对象中的数据项数量

方法

  • Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称
  • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value
  • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中，如果key存在，则更新其对应的值；
  • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除
  • Storage.clear()：该方法的作用是清空存储中的所有key
#JS BOM
上次更新: 2022/09/22, 08:38:31
JavaScript中事件监听
类之间的继承关系

← 类之间的继承关系→

最近更新
01
防抖和节流
02-06
02
正则表达式
01-29
03
async_await函数
12-30
更多文章>
Theme by Vdoing | Copyright © 2019-2023 柳逸尘 | MIT License