JS-BOM----顶级对象window的操作(一)



什么是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);

没有返回值
JS-BOM----顶级对象window的操作(一)_第1张图片

在这里插入图片描述

prompt()输入框

语法:

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

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

JS-BOM----顶级对象window的操作(一)_第2张图片

confirm()确认框

语法:

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

返回布尔值,确定返回true 取消返回false
JS-BOM----顶级对象window的操作(一)_第3张图片
JS-BOM----顶级对象window的操作(一)_第4张图片



定时器

延时定时器

语法:

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

window.setTimeout(延迟时间后要做的事(回调函数),延迟的时间)
        let timeover = window.setTimeout(function() {
            console.log('炸弹爆炸了');

        }, 5000)
        console.log(timeover);

JS-BOM----顶级对象window的操作(一)_第5张图片

结束延时定时器:

语法:

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>Documenttitle>
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>

JS-BOM----顶级对象window的操作(一)_第6张图片

间隔定时器

语法:

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

window.setInterval(每过一段时间要执行的函数,间隔的时间);
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

JS-BOM----顶级对象window的操作(一)_第7张图片

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

你可能感兴趣的:(原生js,javascript,前端,html5)