BOM

84 阅读3分钟

什么是BOM

BOM,Browser Object Model ,即浏览器对象模型。其实就是操作浏览器的一些能力

我们可以操作哪些内容:

  • 获取一些浏览器的相关信息(窗口的大小)
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息(浏览器的版本)
  • 让浏览器出现一个弹出框( alert/confirm/prompt )
  • BOM的核心就是window对象

window是浏览器内置的一一个对象,里面包含着操作浏览器的方法

window对象包含了核心对象

  • location,即当前页面的地址
  • history,即页面的历史记录
  • navigator,包含浏览器相关信息
  • screen,用户显示屏幕相关属性
  • document,即文档对象

窗口对象(Windows)

  1. 常用方法
  • prompt( )显示可提示用户输入的对话框
  • alert( )显示带有一个提示信息和一个确定按钮的警示框
  • confirm( )显示一个带有提示信息、确定和取消按钮的对话框
  • close( )关闭浏览器窗口
  • open( )打开一个新的浏览器窗口,加载给定URL所指定的文档
  • setTimeout( )在指定的毫秒数后调用函数或计算表达式
  • setInterval( )按照指定的周期(以毫秒计)来调用函数或表达式
  1. 定时器

使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

var timerId = setTimeout(function() {
    console.log('倒计时定时器')
},1000)
clearTimeout (timerId)

使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

var timerId2 = setInterval(function() {
    console.log('间隔定时器’)
},1000)
coearInterval(timerId2)

3. 对话框

  • alert( ) 信息提示框

    仅有提示文字,没有返回值

  • confirm( )信息确认框

    具有提示文字,返回“布尔值”(true或false);

    • confirm()方法简介

      在JavaScript中,confirm()方法对话框一般用于确认信息,它只有一个参数,返回值为true或false。

    • 语法:confirm(message)

    • 说明:

      message是必选项,表示弹出对话框中的文本,这是一个字符串。如果用户点击“确定”,则confirm()返回true。如果用户点击“取消”按钮,则confirm()返回false。confirm()方法往往都是和按钮结合使用。

  • prompt( )信息输入框

    具有提示文字,返回“字符串”;

    • prompt()方法简介

      在JavaScript中,prompt()方法对话框用于输入并返回用户输入的字符串。

    • 语法:prompt(message);

    • 说明:参数message表示对话框中的提示内容,这是一个字符串。

  1. 获取浏览器窗口尺寸

innerHeight和innerwidth这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowwidth = window.innerWidth
console.log(windowwidth)

5. 浏览器的onscroll事件

这个onscroll事件是当浏览器的滚动条滚动的时候触发或者鼠标滚轮滚动的时候出发

window.onscroll = function() {
    console.1og('浏览器滚动了')
}

注意:前提是页面的高度要超过浏览器的可是窗口才可以

历史记录对象(history)

获取history对象 window.history

QQ截图20220825232727.png

位置对象(location)

  • 常用属性: location.href

获得当前页面的URL地址:location.href(window.location.href)

  • 常用方法

重新加载当前文档:location.reload()

  • 属性

QQ截图20220825233039.png