09 BOM

胖虎不虎
151 阅读5分钟

什么是BOM

BOM，Browser Object Model，即浏览器对象模型。

其实就是操作浏览器的一些能力

我们可以操作哪些内容:

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

window对象包含了核心对象

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

图示理解

什么是BOM.png

窗口对象(window)

常用方法

窗口对象(window) 常用方法.png

alert
  • window.alert( ) => 使用window根对象属性或方法时，window对象可以省略

alert.png

confirm

confirm.png

prompt

prompt.png

定时器

  • 什么叫定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时器。
  • 定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。
setTimeout()和clearTimeout()；
  var timerId = setTimeout(function () {
            // 3s后在页面弹出'hello'
            // alert('hello')

            // 3s后在控制台输出'倒计时计时器'
            console.log('倒计时计时器')
        }, 3000)
        clearTimeout(timerId)
setInterval()和clearInterval()；
 var timerId2 = setInterval(function () {
            // 每隔3s在页面输出'hello'
            // alert('hello')

            //每隔3s在控制台输出'间隔定时器'
            console.log('间隔定时器')
        }, 3000)
        clearInterval(timerId2)
  • 在JavaScript中，我们可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。
  • 在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

对话框

  • alert() 消息提示框
  • confirm() 消息确认框
  • prompt()

对于浏览器的对话框，我们都见过不少了。这一章我们给大家总结一下JavaScript对话框方面的知识。

在JavaScript中，对话框共有3种：

  • （1）alert();
  • （2）confirm();
  • （3）prompt()；

这3种方法都是属于window对象。其实alert()方法完整写法是“window.alert()”，但是由于window对象是全局对象，我们简写成“alert()”即可。confirm()和prompt()也是同样的道理。

其中，这3种对话框特点如下：

（1）alert()：仅有提示文字，没有返回值；

（2）confirm()：具有提示文字，返回“布尔值”（true或false）；

confirm()方法简介

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

语法： confirm(message)

说明：

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

（3）prompt()：具有提示文字，返回“字符串”；

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

语法：

prompt(message); 说明：

参数message表示对话框中的提示内容，这是一个字符串。

举例：
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var name = prompt("请输入你的名字");
        document.write("欢迎<strong>" + name + "</strong>来到javacripte学习");
    </script>
</head>
<body>
</body>
</html>

获取浏览器窗口的尺寸

  • innerHeight 和 innerWidth
  • 这个两个方法分别是用来获取浏览器窗口的宽度和高度（包括滚动条的）
  var windowHeight = window.innerHeight
        console.log(windowHeight)

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

浏览器的 onscroll 事件

  • 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
  • 或者鼠标滚轮滚动的时候触发
 <div style="width:200px; height:1200px; background:skyblue"></div>
    <script>
        window.onscroll = function () {
            console.log('浏览器滚动了')
        }
    </script>
  • 注意；前提是页面的高度要超过浏览器的可视窗口才可以

浏览器滚动的距离

  • 浏览器内的内容既然可以滚动，那么我们就可以获取到浏览器滚动的距离
  • 思考一个问题：
    • 浏览器真的滚动了吗？
    • 其实我们的浏览器是没有滚动的，是一直在那里的
    • 滚动的是什么？是我们的页面
    • 所以说，其实浏览器没有动，只不过是页面向上走了
  • 所以，这个已经不能单纯的算是浏览器的内容了，而是我们的页面内容
  • 所以不是在用 window 对象了，而是用 document 对象
scrollTop 获取的是页面向上滚动的距离

两个获取方式

  • document.body.scrollTop
  • document.documentElement.scrollTop
<div style="width: 200px; height: 1200px; background: skyblue;"></div>
    <script>
        window.onscroll = function () {
            console.log(document.body.scrollTop)
            console.log(document.documentElement.scrollTop)
        }
    </script>

区别

  • IE浏览器
    • 没有 DOCTYPE 声明的时候，用这两个都行
    • 有 DOCTYPE 声明的时候，只能用document.documentElement.scrollTop
  • Chrome 和 FireFox
    • 没有 DOCTYPE 声明的时候，用document.body.scrollTop
    • 有 DOCTYPE 声明的时候，用document.documentElement.scrollTop
  • Safari
    • 两个都不用，使用一个单独的方法 window.pageYoffset
scrollLeft 获取页面向左滚动的距离

两个方法

  • document.body.scrollLeft
  • document.documentElement.scrollLeft
<div style="width: 2000px; height: 200px; background: skyblue;"></div>
    <script>
        window.onscroll = function () {
            console.log(document.body.scrollLeft)
            console.log(document.documentElement.scrollLeft)
        }
    </script>
  • 两个之间的区别和之前的 scrollTop 一样

历史记录对象(history)

获取 history 对象 window.history

历史记录对象(history).png

位置对象(location)

常用属性：location.href

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

常用方法

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

属性

位置对象(location)的属性.png

屏幕对象(screen了解)

提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。

屏幕对象(screen了解).png

浏览器的版本信息（navigator了解）

  • window 中有一个对象叫做 navigator
  • 是专门用来获取浏览器信息的
navigator.userAgent
  • navigator.userAgent 是获取的浏览器的整体信息
    console.log(window.navigator.userAgent)
        // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
navigator.appName
  • navigator.appName 是获取的浏览器的名称
  console.log(window.navigator.appName)
navigator.appVersion
  • navigator.appVersion 是获取的浏览器的版本号
 console.log(window.navigator.appVersion)
navigator.platform
  • navigator.platform 是获取的是当前计算机的操作系统
  console.log(window.navigator.platform)
avatar
文章
阅读
粉丝