BOM学习笔记
馨er BOSS
  2022-10-29 22:07:38 2022-10-29 22:07      2.4k 字  10 分钟

BOM学习笔记

1 认识BOM操作

BOM（Broswer Object Model），由浏览器提供的用于处理文档之外的所有内容的其它对象，比如natigator、location、history等对象

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

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

2 window

window对象：①全局对象，Node中为global，浏览器为window对象；②浏览器窗口对象（提供了对浏览器操作的相关的API）

为了规范，在最新的标准中他们的全局对象都可叫做globalThis

1
2
console.log(window)
console.log(globalThis === window) // true

2.1 window全局对象

window默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等；全局通过var声明的变量，会被添加到window上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var message = "Hello World"
function foo() {
    console.log("foo function")
}

console.log(window.message)
window.foo()
window.setTimeout(() => {
    console.log("setTimeout")
}, 1000)

const obj = new window.Object()
console.log(obj)

const date = new window.Date()
console.log(date)

2.2 window窗口对象

window对象包含的内容：https://developer.mozilla.org/zh-CN/docs/Web/API/Window

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

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

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

第四：包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法；

2.3 window常见的属性

1
2
3
4
5
6
7
8
9
10
11
12
// 浏览器高度
console.log(window.outerHeight)
console.log(window.innerHeight)

console.log("screenX:", window.screenX)
console.log("screenY:", window.screenY)

// 监听
window.addEventListener("scroll", (event) => {
    console.log(window.screenY)
    console.log(window.screenX)
})

2.4 window常见的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const closeBtn = document.querySelector("#close")
closeBtn.onclick = function () {
    close() // 关闭窗口（window.open()打开的窗口才能通过此方法关闭）
}

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

const openBtn = document.querySelector("open")
openBtn.onclick = function () {
    open("./about.html", "_self") // _self为在本窗口打开一个新的窗口，默认为打开一个新窗口
}

2.5 window常见的事件

2.5.1 常见的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onfocus = function () {
    console.log("窗口获取到焦点")
}
window.onblur = function () {
    console.log("窗口失去了焦点")
}
window.onload = function () {
    console.log("页面加载完成")
}

const hashBtn = document.querySelector("#hash")
hashBtn.onclick = function () {
    location.hash = "aaa"
}
// 监听hash值的改变（URL#后面的内容）
window.onhashchange = function () {
    console.log("hash被修改了")
}

2.5.2 eval函数

1
2
3
4
5
6
// eval函数可以将一个字符串当做一段JS代码解释执行!
window.eval("var i = 100")
            
//var i = 100
console.log(i)
// 100

2.5.3 窗口的开启和关闭

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- window.open开启一个新窗口 -->
<!-- window.open(url, target) ，和超链接效果差不多，都是可以发送请求给服务器的-->

<!-- 开启一个窗口，默认是开启一个新窗口。 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"/>

<!-- 开启一个窗口，在当前窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_self')"/>
<!-- 开启一个窗口，在新窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_blank')"/>
<!-- 开启一个窗口，在父窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_parent')"/>
<!-- 开启一个窗口，在顶级窗口中显示 -->
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com', '_top')"/>

<input type="button" value="002" onclick="window.open('002.html')"/>
1
2
3
// 002窗口
<input type="button" value="关闭窗口" onclick="window.close()"/>
<!--点击按钮后回退到上一个窗口-->

浏览器的网页访问（栈）

2.5.4 alert和confirm方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">
   function sayHello(){
      // 弹出消息框
      window.alert("hello world!");
   }
   
   function del(){
      // 删除数据之前一定要提示用户是否真的删除,用户点击了确定才表示真的删除.
      // 确认框
      //var ok = window.confirm("亲，确认删除数据吗？")
      //console.log(ok) //返回值是一个布尔类型.
      
      /* if(ok){
         alert("数据正在删除中，请稍后...")
      } */
      
      if(window.confirm("亲，确认删除数据吗？")){
         alert("数据正在删除中，请稍后...")
      }
      // 确认or取消
   }
</script>

<input type="button" value="hello" onclick="sayHello()"/>

<input type="button" value="删除" onclick="del()"/>

2.5.5 将当前窗口设置为顶级窗口

先开始005.html出现在此页面的iframe标签中，点击按钮则打开005.html，变为顶级窗口

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>将当前窗口设置为顶级窗口</title>
   </head>
   <body>
      <iframe src="005.html" width="500px" height="500px"></iframe>
   </body>
</html>

005.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        005页面
        <script type="text/javascript">
			/* 如果当前这个窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。 */
			function setTop(){
				// window是当前浏览器窗口,代表005.html
				// “当前窗口的顶级窗口"如果"不是自己"
				// window.top就是当前窗口对应的顶级窗口.
				// window.self表示当前自己这个窗口
				// window.top 是004窗口
				// window.self 是005窗口
				//console.log((window.top != window.self))
                
				if(window.top != window.self){
					// 将当前窗口设置为顶级窗口
					// window.self.location 是005的地址
					// 将顶级窗口的window.top.location地址设置为005
					window.top.location = window.self.location;
                }
            }
        </script>
        
        <input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话,将当前窗口设置为顶级窗口"/>
        
    </body>
</html>

3 location对象

3.1 location对象常见的属性

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

常见的属性：

  • href：当前window对应的超链接URL，整个URL

  • protocol：当前的协议（http、https或其它）

  • host：主机地址（包含端口号）

  • hostname：主机地址（不带端口）

  • port：端口

  • pathname：路径

  • search：查询字符串（?name=why&type=1，搜索页面路径常用）

  • hash：哈希值

  • username：URL中的username

  • password：URL中的password

window.location.href

跳转页面可以通过多种方式：（这些都是发送请求！！！！）

  • 第一种方式：直接在浏览器地址栏上写URL。（重点）
  • 第二种方式：可以点击超链接（重点）
  • 第三种方式：提交表单（重点）
  • 第四种方式：window.open(url,target) （了解）
  • 第五种方式：js代码（重点）
    • window.location.href
    • window.location
    • document.location.href
    • document.location

通过浏览器向服务器发送请求，通常是以上的五种方式。

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
   function goBaidu(){
      //window.location.href = "http://www.baidu.com";
      //window.location = "http://www.jd.com";
      
      //document.location.href = "http://www.126.com";
      document.location = "http://www.baidu.com";
   }
</script>
<input type="button" value="百度" onclick="goBaidu();"/>

3.2 location对象常见的方法

assign：赋值一个新的URL，并且跳转到该URL中

replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）

reload：重新加载页面，可以传入一个Boolean类型

1
2
3
4
5
6
const locationBtn = document.querySelector("#location")
locationBtn.onclick = function () {
    location.assign("https://www.baidu.com")
    location.assign("https://www.baidu.com")
    location.reload()
}

URLSearchParams

搜索字符串的处理

1
2
3
4
5
6
7
8
9
// 搜索字符串的处理
var urlSearchString = "?name=why&age=18&height=1.88"
var serchParams = new URLSearchParams(urlSearchString)
console.log(searchParams.get("name")) // why
console.log(searchParams.get("age")) // 18
console.log(searchParams.get("height")) // 1.88

searchParams.append("address", "山西省")
console.log(searchParams.get("address")) // 山西省

URLSearchParams常见的方法：

  • get：获取搜索参数的值
  • set：设置一个搜索参数和值
  • append：追加一个搜索参数和值
  • has：判断是否有某个搜索参数

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

4 history对象

前端路由模式：修改了URL，但是页面不刷新

  • 修改了hash值
  • 修改history

history对象允许我们访问浏览器曾经的会话历史记录

4.1 history对象常见的属性

length：会话中的记录条数

state：当前保留的状态值

4.2 history对象常见的方法

back()：返回上一页，等价于history.go(-1)

forward()：前进下一页，等价于history.go(1)

go()：加载历史中的某一页

pushState()：打开一个指定的地址

replaceState()：打开一个指定的地址，并且使用replace（不会在浏览记录中留下之前的记录）

history和hash目前是vue、react等框架实现路由的底层原理，具体的实现方式我会在后续讲解

5 navigator

navigator对象表示用户代理的状态和标识等信息（较少使用）

image-20221101215314840

6 screen

screen主要记录的是浏览器窗口外面的客户端显示器的信息（较少使用）

image-20221101215829917

  • 本文标题：BOM学习笔记
  • 本文作者：馨er
  • 创建时间：2022-10-29 22:07:38
  • 本文链接：https://sjxbbd.vercel.app/2022/10/29/9812a8e83c0f/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！