BOM

最新推荐文章于 2024-08-22 18:06:31 发布

Halle！

最新推荐文章于 2024-08-22 18:06:31 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/Problem_Girl/article/details/103695692

版权

前端大集合专栏收录该内容

112 篇文章 0 订阅

订阅专栏

BOM的概念

BOM（Browser Object Mode）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶级对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理。比如刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

注意：window下的一个特殊属性 window.name

//当我们使用window的成员的时候，window可以省略，document也是window的一个属性
//alert('2b');  其实相当于 window.alert('2b');

console.dir(window);    
//dir为输出一个对象，指输出window对象，我们可以通过输出window对象来查看其下的所有属性或方法：如name，top，document等 

//我们前面定义的全局变量都属于window，都是window对象的属性

var top = 'top';
console.log(top);    //注意：top是window的属性，只能获取不能赋值

以前常用的对话框：（现在不用了，因为用户体验不好每次都要点击一下，而且外观不好看，了解一下）。都是基于button按钮下

alert(): 弹出对话框里的内容如alert（‘我们结婚吧’）；

prompt(): 弹出提示，让用户输入内容，有两个参数，一为输入提示字，二为默认值。如 var userName = prompt('请输入姓名', '张三')；

confirm(): 提示用户是否要删除，为一个布尔值。 var isSure = confirm（'是否要删除数据？'）;

页面加载事件

以前的js代码都是从上而下来执行，现在BOM提供了一个window下的属性 onload，指页面加载完成之后执行。不只是window具有此属性，所有标签和元素都具有。

onload:页面加载完成指页面上所有的元素创建完毕，并且引用的外部资源下载完毕（如js、css、图片），方法体才执行

onunload:指页面卸载的时候执行，即关闭浏览器的标签

onload = function () {    //相当于window.onload = function()
    var box = document.getElementById('box');
    console.dir(box);    //即使box为body下的代码，也是可以获取到box的id的，因为onload的含义
}

onunload = function () {
    alert('撒由那拉');     //在onunload中所有的对话框都无法使用，因为window对象被冻结了
    console.log('bye bye');   //要想输出bye bye，只能按F5来刷新然后在控制台上看到该字符串
    
    //F5刷新页面的作用：  1.先卸载页面    2.后重新加载页面
}

定时炸弹和闹钟

setTimeout（）定时炸弹隔一段时间执行，并且只会执行一次。可以理解为炸弹爆炸了就没有了

//定时器的标志，指用来识别该定时器，以便取消该定时器的爆炸执行
var timeId;  //标志为timeId,用于后面取消

var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
    //window.setTimeout有两个参数一个返回值，该返回值是一个整数，是定时器的标志，用于需要取消定时器按钮
    //参数一为要执行的函数，参数二位间隔时间，单位为毫秒
    
    timeId = setTimeout (function () {    //function（）为参数一匿名函数，还可以是命名函数，见下面
        console.log('爆炸了');
    }， 3000);    //3000为参数二
}

 var btn2 = document.getElementById('btn2');    //取消按钮
 btn2.onclick = function () {
    //取消定时器的执行
    clearTimeout(timeId);    //timeId定时器的标志
}

//setTimeout的另一种方式
timeId = setTimeout(fn,3000);    
function fn() {                 
    console.log('爆炸了');      
}
//注意此处切忌不可写成fn(),因为这个形式为方法的调用，当方法执行到这时，就会去调用fn方法
//调用结束后的返回值将作为setTimeout的第一个参数，而此时fn方法没有返回值，那么参数一就
//为undefined，那么此时3000ms过后并不会起作用，即该炸弹定时器没有作用

setInterval（）闹钟隔一段时间执行，并且会重复执行，如闹钟设置每天重复，用法和setTimeout（）一样，同样有两个参数

案例弹出框显示删除成功且3s后隐藏弹出框

首先有一个按钮id为btn，div的id为tip且内容为删除成功

var btn = document.getElementById('btn');
btn.onclick = function () {
    //删除操作，即显示删除成功的tip
    var tip = document.getElementById('tip');    //获取div的id
    tip.style.display = 'block';                //div的样式为display：block
    //隔3秒钟之后让tip隐藏
    setTimeout(function () {
        tip.style.display = 'none';    //3秒后隐藏div
},3000);

}

案例之倒计时

获取两个日期的时间差

function getInterval(start, end) {
    //两个日期对象，相减即为相差的毫秒数
    var interval = end - start;
    //求相差的天数/小时数/分钟数/秒数
    var day, hour, minute, second;

    interval /= 1000; //相差的毫秒数转化为秒数
    
    day = Math.round(interval / 60 / 60 / 24);
    hour = Math.round(interval / 60 / 60 % 24);
    minute = Math.round(interval / 60 % 60);
    second = Math.round(interval % 60);

    return {        //因为所需返回的数不止一个，所以将return封装成对象
        day: day,
        hour: hour,
        minute: minute,
        second: second
    }
}

倒计时实现。首先div下有四个span分别填充内容为天时分秒，id也分别对应天时分秒

var endDate = new Date('2020-6-24 0:0:0');    //目标时间
var spanDay = document.getElementById('spanDay');
var spanHour = document.getElementById('spanHour');
var spanMinute = document.getElementById('spanMinute');
var spanSecond = document.getElementById('spanSecond');


setInterval(countdown, 1000);    //隔一秒钟提醒或变化一次
countdown();

function countdown() {
    //计算时间差
    var startDate = new Date();    //获取当前的时间
    //计算两个日期的时间差
    var interval = getInterval(startDate, endDate);
    
    setInnerText(spanDay,interval.day);
    setInnerText(spanHour,interval.hour);    //调用前面的innerText兼容性处理函数
    setInnerText(spanMinute,interval.minute);  //参数一为插入内容的元素标签，参数二为插入的内容
    setInnerText(spanSecond,interval.second);
}

location对象

location对象是window对象下的一个属性，所以使用的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL
location有哪些成员（属性或方法）？可以在控制台直接输入location或查MDN。还可以console.dir(location);直接在控制台输出
其成员大概有：assign（），reload（），replace（），hash，host，hostname，href等

btn.onclick = function () {
    console.log(location.href);    //点击后输出当前点击事件的地址
    
    //assign 委派，assign（）的作用和href的作用一样，可以让页面跳转到指定的地方
    //location.href = 'test1.html'; 等同于 location.assign('test1.html');

    //replace为替换掉地址栏中的地址，但是不记录历史，既没有后退按钮
    location.replace('test.html');

    //有一个参数为布尔值，true为强制从服务器获取页面，false为如果浏览器有缓存则从缓存获取页面
    location.reload(true);    //F5刷新页面相当于false，ctrl+F5强制刷新相当于true
}

案例点击按钮让div盒子缓缓向右移动

var btn = document.getElementById('btn');
var box = document.getElementById('box');

//移动不过是让盒子的纵坐标依次加个长度，那么盒子的位置+x即可,而盒子的位置为offsetLeft、offsetTop

//其次让盒子不停的向右移动可以用setInterval，主要是因为它的参数二可实现盒子隔多长时间移动这个距离
var timerId = setInterval(function (){

    var target = 60;    //最终盒子停止的位置
    if (box.offsetLeft >= target) {
        clearInterval(timerId);    //停止定时器
        box.style.left = target + 'px';    //设置坐标为600px
        console.log(box.style.left);
        return;    //退出函数

    }
    box.style.left = box.offsetLeft + 6 + 'px';
    console.log(box.style.left);
},30);    //30毫秒即0.03秒移动一次6px距离

URL组成

scheme://host:port/path?query#fragment 如： http://www.baidu.com:80/a/b/index.html?name=zs&age=18#bottom

scheme:通信协议。常用的有http，ftp，maito等
host：主机。服务器（计算机）域名系统（DNS）主机名或IP地址
port：路径。整数，可选，省略时使用方案的默认端口，如http的默认端口为80
query：查询。可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用=隔开，如： name=zs
fragment：信号片段。字符串，锚点

history和userAgent

history为window下的一个属性，用于记录浏览历史即拥有前进和后退，但现在都不用手动说明，浏览器会帮我们记录。手动的话一般在注册点击事件里说明：history.foword();和history.go(1);为前进。 history.back();和history.go(-1)；为后退。
userAgent为window下navigator的属性。用于浏览给服务器提供当前用户使用的是pc端或手机版本，以便让服务器处理给用户呈现怎样的浏览模式，如浏览器的浏览模式在每个手机上是不一样的，而navigator.userAgent记录的就是版本信息等相关信息。