什么是Bom？

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

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

DOM与BOM的区别：

dom:

文档对象模型
DOM就是把文档当作一个对象来看待
DOM的顶级对象是document
DOM主要学习操作页面元素

bom：

浏览器对象模型
把浏览器当作一个对象来看待
BOM的顶级对象是window
BOM主要学习操作浏览器窗口交互的一些对象

`BOM比DOM更大，它包含DOM`

顶级对象window：

window是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
浏览器上的弹框、对话框都属于window对象的方法。

浏览器常用事件：

页面(窗口) 加载事件

当把script脚本写到页面前面，就会出现没有加载完页面的情况下调用了js，会报错！

使用页面加载事件，等页面加载完再调用js脚本

window.onload方法：

<script>
	window.onload = function() {
		// js代码
	}
</script>

DOMContentLoaded方法：

<script>
	document.addEventListener('DOMContentLoaded',function () {
		// js代码
	})
</script>

`两个方法的区别：`

window.onload 传统注册事件的方式，只能写一次，如果写多个就会被最后一个覆盖，而使用DOMContentLoaded则没有限制。
window.onload 会等所有内容完全加载完成(包括图像、脚本文件、CSS 文件等) 再执行js脚本，而使用DOMContentLoaded不包括样式表，图片，flash等等。

alert()弹框

语法：

        let al = alert('111');
        console.log(al);

没有返回值
在这里插入图片描述

在这里插入图片描述

prompt()输入框

语法：

        let al = prompt('请输入');
        console.log(al);

返回用户输入的值，如果点击取消返回null
在这里插入图片描述

在这里插入图片描述

confirm()确认框

语法：

        let al = confirm('确定要退出吗？');
        console.log(al);

返回布尔值，确定返回true 取消返回false
在这里插入图片描述

定时器

延时定时器

语法：

在延时结束后只调用一次函数,有返回值，有多个定时任务的时候返回值为定时任务的id，方便管理定时任务。

window.setTimeout(延迟时间后要做的事（回调函数）,延迟的时间)

        let timeover = window.setTimeout(function() {
            console.log('炸弹爆炸了');

        }, 5000)
        console.log(timeover);

在这里插入图片描述

结束延时定时器：

语法：

window.clearTimeout(定时器的id)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>结束定时器</button>
    <script>
        let btn = document.querySelector('button');
        let timeover = window.setTimeout(function() {
            console.log('炸弹爆炸了');

        }, 5000)
        console.log(timeover);
        btn.onclick = function() {
            window.clearTimeout(timeover)
            console.log('结束了定时任务');

        }
    </script>

</body>

</html>

在这里插入图片描述

间隔定时器

语法：

每过一段时间就调用一次回调函数

window.setInterval(每过一段时间要执行的函数,间隔的时间);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>结束定时器</button>
    <script>
        let btn = document.querySelector('button');
        var timeover = window.setInterval(function() {
            var time1 = new Date();
            console.log(time1);

        }, 1000)

        btn.onclick = function() {
            window.clearInterval(timeover);
        }
    </script>

</body>

</html>

在这里插入图片描述

间隔定时器和延时定时器同样有返回值，同样可以清除定时器

原文链接：https://blog.csdn.net/bjsyc123456/article/details/121212670