javascript BOM对象详解

最新推荐文章于 2025-12-24 10:29:31 发布

原创最新推荐文章于 2025-12-24 10:29:31 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #es6 #css #html5

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文详细阐述了JavaScript的BOM对象，包括BOM的定义、构成，重点讲解了顶级对象window及其页面加载和窗口大小调整事件，还探讨了定时器的使用（setTimeout和setInterval）以及this指向问题。

javascript BOM对象详解

目标：本章节将分为9点详细介绍有关BOM对象的知识点
1.什么是BOM
2.BOM的构成
3.顶级对象window
4.window对象常见事件（页面加载事件和体调整窗口大小事件）
5.定时器（setTimeout()、setInterval()）
6.this指向问题
7.location对象
8.navigator对象
9.history对象

1.什么是BOM

在这里插入图片描述

2.BOM的构成

在这里插入图片描述

3.顶级对象window

在这里插入图片描述

4.window常用事件

a.页面或者窗口事件

在这里插入图片描述

b.调整窗口大小事件

在这里插入图片描述

5.定时器

在这里插入图片描述

a.setTimeout()定时器炸弹

在这里插入图片描述

b.setInterval()闹钟定时器

在这里插入图片描述

<div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
</div>
    <script>
        // 1. 获取元素（时分秒盒子） 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数

        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 

        // 2. 开启定时器
        setInterval(countDown, 1000);
		
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>

在这里插入图片描述

6.this指向问题

在这里插入图片描述

<button>点击</button>
<script>
    // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
    // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
    console.log(this);

    function fn() {
        console.log(this);
    }
    window.fn();
    window.setTimeout(function() {
        console.log(this);
    }, 1000);
    // 2. 方法调用中谁调用this指向谁
    var o = {
        sayHi: function() {
            console.log(this); // this指向的是 o 这个对象
        }
    }
    o.sayHi();
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
            console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
        })
        // 3. 构造函数中this指向构造函数的实例
    function Fun() {
        console.log(this); // this 指向的是fun 实例对象
    }
    var fun = new Fun();
</script>