js之浏览器对象模型bom

浏览器对象模型(BOM)

BOM概述

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心 对象是 window。

• 浏览器对象模型
• 把「浏览器」当做一个「对象」来看待
• BOM 的顶级对象是 window
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM的构成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FORDXjTK-1677570949539)(F:大前端笔记jsAPIimgBOM树.png)]

window 对象中的属性

Window 对象及常见事件

• 所有浏览器都支持 window 对象,表示浏览器窗口。
  • 所有 JavaScript 全局对象
  • 函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
• HTML DOM 的 document 也是 window 对象的属性之一

浏览器的方法

浏览器窗口加载事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

//传统注册方式
window.onload = function(){}
//事件监听注册方式
window.addEventListener("load",function(){})

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用 户的体验，此时用 DOMContentLoaded 事件比较合适

document.addEventListener('DOMContentLoaded',function(){})

对比

load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等

DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

弹出框

提示框alert()

语法

window.alert('提示文本')
//window对象可以省略

弹出一个提示框

表现形式：一个提示文本+确定按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Td8EylJc-1677570949540)(F:大前端笔记jsAPIimg弹出框.png)]

返回值：undefined

输入框prompt()

语法

window.prompt('提示文本')
//window对象可以省略

表现形式：一个提示文本+一个输入框+一个确定按钮+取消按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0w4s2qJe-1677570949541)(F:大前端笔记jsAPIimg提示框.png)]

返回值：当点击确定的时候返回值就是用户的输入的内容，当点击取消按钮的时候返回值是null

询问框confirm()

语法

window.confirm('提示文本')
//window对象可以省略

表现形式：一个提示文本+一个确定按钮+一个取消按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZDnBtC5w-1677570949541)(F:大前端笔记jsAPIimg询问框.png)]

返回值：当点击确定的时候返回true，当点击取消的时候返回false。

获取浏览器可视窗口尺寸

可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。

获取窗口宽度

window.innerWidth

获取窗口高度

window.innerHeight

注意：获取的宽度和高度是包含滚动条在内的。

浏览器卷去

scrollTo()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcJbxL6s-1677570949542)(F:大前端笔记jsAPIimgscroll.png)]

浏览器卷去的尺寸：

• 浏览器本身其实是不动的，滚动的时候应该是页面被滚走了。

• 研究浏览器卷去的尺寸其实就是研究页面被滚走的尺寸

• 要求html文件中必须有doctype标签才可正常获取：

  • 获取页面纵向卷去的尺寸：document.documentElement.scrollTop
  • 获取页面横向卷去的尺寸：document.documentElement.scrollLeft

• 要求html文件没有doctype标签的时候:

  • 获取页面纵向卷去的尺寸:document.body.scrollTop
  • 获取页面横向卷去的尺寸:document.body.scrollLeft

• 兼容写法：不管有没有doctype都能成功获取

  • 获取页面纵向卷去的尺寸:var 变量名 = document.documentElement.scrollTop || document.body.scrollTop
  • 获取页面横向卷去的尺寸:var 变量名 = document.documentElement.scrollLeft || document.body.scrollLeft

浏览器历史记录

研究历史记录其实就是模仿浏览器上的前进和回退按钮

要求的前提是：页面必须有历史记录才行

前进和回退

• 当点击前进按钮的时候需要去到2页面
  • 前进：window.history.forward()
  • 回退：window.history.back()
• 去到指定的历史记录的页面：window.history.go(数字)

​ 写数字0：去到本页面，其实刷新的意思

​ 写正整数：比如写的是1，意思就是前进1页，写的是2，意思就是前进2页

​ 写负整数：比如写的是-1，意思就是回退1页，写的是-1，意思就是回退2页

浏览器常用事件

load事件

语法

window.onload = function(){
                    //代码
                }

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

resize事件

语法

window.onresize = function(){
                    //代码
                }

调整窗口大小加载事件，页面尺寸发生改变，就会自动执行function中的代码

scroll事件

语法

window.onscroll = function(){
                    //代码
                }

只要滚动条动了，就会执行function中的代码

浏览器地址栏

href

• 在window内有一个location属性，他是一个对象数据类型，里面存储了一些和地址栏相关的信息。

• window.location.href:单独拿到网址。

• window.location.href = ‘网址’==重新给href进行复制操作，可以实现达到网页跳转的效果，在本窗口跳转。

• 语法

   window.location.href = '网址'
  

reload()【刷新】

重新加载

window.location.reload()

定时器

setTimeout()【延时定时器】

1. window对象在调用的时候可以省略
2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’
4. 页面中可能有很多的定时器，我们可以给定时器起名字

语法

window.setTimeout(调用函数, 延时时间)

例子

setTimeout(function() {
    console.log('我过了1000ms，也就是1s')
}, 1000)
//也可以  这么写
 function callback() {
            console.log('时间到了')
        }
//调用定时器
        var timer1 = setTimeout(callback, 2000)
        var timer2 = setTimeout(callback, 6000)

清除定时器clearTimeout()

语法

 window.clearTimeout(timeoutID)
 //timeoutID   定时器名字

setInterval()【循环定时器】

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

语法

 window.setInterval(回调函数, [间隔的毫秒数])

清除定时器clearInterval()

语法

 window.clearInterval(timeoutID)
 //timeoutID   定时器名字

两个定时器区别

• setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
• setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

存储

本地存储locationStorage

本地存储：将程序中产生的一些数据存储到本地

1. localStorage永久存储，你只要不手动删除，就一直存在
2. 存储据的语法：window.localStorage.setItem(key，value)
3. 获取储据的语法：window.localStorage.getItem(key)
4. 修改数据的语法和存的语法是一样的。
   • 键名第一次出现叫做存，第二次出现叫做修改
5. 删除数据的语法：window.localStorage.removeItem(‘键名’)
6. 一键清空：window.localStorage.clear()

• 特点：
  • 永久存储
  • 支持跨页面通讯，也就是在其他页面同样可以获取到你存好的数据。
  • 只能存储字符串类型的数据，不能存储复杂数据类型

本地存储sessionStorage

1. localStorage会话级别存储，生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了。
2. 存储据的语法：window.sessionStorage.setItem(key，value)
3. 获取储据的语法：window.sessionStorage.getItem(key)
4. 修改数据的语法和存的语法是一样的。
   • 键名第一次出现叫做存，第二次出现叫做修改
5. 删除数据的语法：window.sessionStorage.removeItem(‘键名’)
6. 一键清空：window.sessionStorage.clear()

• 特点：
  • 临时存储，会话级别，页面（浏览器）关闭就没了
  • 虽然支持跨页面通讯，但是要求必须是从当前页面跳转过去的并且是当前窗口打开才行。
  • 只能存储字符串类型的数据，不能存储复杂数据类型。

cookie存储

1. 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
2. Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
   • 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
   • 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
3. Cookie默认也是会话级别，浏览器关闭数据就没了
4. Cookie可以手动设置过期时间。
5. 因为cookie原生接口不好，需要自己封装函数

this和target

this

• this是函数体内的内置对象（只能出现在函数体内）
• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象
• 与事件体连用，代表触发事件的元素本身
• 与普通函数连用(除了事件体,和构造函数),代表调用该方法的前缀对象
• 几个this指向
  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

bind

bind:修改this指向的函数,它是函数对象的函数
函数对象.bind(修改的this指向)

var oBox = document.querySelector("#box")
document.onclick = function(){
        this.style.display = "none"
    }.bind(oBox)

target

target 事件属性返回触发事件的元素。
我们可以认为target事件，会自动判断我们点的是哪个元素。

e.target 和 this 的区别：

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素（对象）

最后

以上就是壮观春天为你收集整理的js之浏览器对象模型bom的全部内容，希望文章能够帮你解决js之浏览器对象模型bom所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。