提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

【学习笔记37】BOM基本认识

笔记学习 基本 认识 37 bom
2023-09-11 14:14:57 时间

BOM基本认识

1、认识BOM

  • BOM：浏览器对象模型
  • 可以理解为浏览器给我们提供了一系列方法
    1. 可以打开一个浏览器弹窗框
    2. 记录当前窗口大小
    3. 操作页面跳转
    4. ……

2、获取浏览器窗口的尺寸

  • JS的全局作用域, 有一个window对象, 我们BOM的方法都在他里边
  • 使用的时候语法：window.XXX
  • 但是window可以忽略不写
       console.log(window);

在这里插入图片描述

获取浏览器窗口的尺寸

       console.log(window.innerHeight);
       console.log(window.innerWidth);

在这里插入图片描述

4、浏览器的地址信息

  • window有一个location, 内部记录了浏览器的地址信息
  • location 内部有一个`href属性·, 可以获取当前浏览器的地址, 也可以给他赋值新地址, 实现页面跳转

在这里插入图片描述

        setInterval(function(){
            // 跳转页面
            window.location.href = 'http://www.yizhiyang31.com';
        }, 3000)
​

在这里插入图片描述

5、浏览器的刷新功能

window对象内部有一个location他的内部有一个reload 方法

        var count = 0;
        setInterval(function(){
            count++;
            console.log(count);
​
            if(count === 5){
                // 不要写在刷新的外部 要不然会一直刷新
                // 应该写在一个条件的内部
                window.location.reload();
            }
        }, 1000)

在这里插入图片描述

6、浏览器的历史记录

  • 模拟左上角的回退与前进
  • window内部有一个history，内部有方法能够让我们能实现浏览器的前进回退功能
  • window.history.back() 回退
  • window.history.forward()前进(必须现有过一次回退, 才能使用前进)

在这里插入图片描述

7、浏览器的版本信息(了解)

window 对象中的navigator,对象可以查到相关信息

    console.log(window.navigator);

在这里插入图片描述

8、浏览器的onload事件

  • onload事件, 等到页面的所有资源加载完毕后在执行
  • 浏览器的图片加载是异步的
        window.onload = function () {
​
            console.log(100);
        }

9、浏览器的onscroll事件

  • 实就是浏览器的滚动事件, 浏览器页面滚动的时候会触发
        window.onscroll = function () {
            
            console.log('页面滚动~~~~~');
        }

浏览器的滚动距离

因为是页面滚动, 所以需要使用 document 对象去获取滚动的距离

方法:
document.body.scrollTop              在浏览器没有声明 <!DOCTYPE html>
document.documentElement.scrollTop   在浏览器声明了 <!DOCTYPE html>
document.body.scrollLeft             在浏览器没有声明 <!DOCTYPE html>
document.documentElement.scrollLeft  在浏览器声明了 <!DOCTYPE html>

    <div></div>
    <style>
        div {
            width: 5000px;
            height: 5000px;
        }
    </style>

        window.onscroll = function () {
            console.log('开始滚动~~~')
            console.log(
                'document.body.scrollTop: ', document.body.scrollTop,
                'document.documentElement.scrollTop: ', document.documentElement.scrollTop
            )
        }

在这里插入图片描述

        window.onscroll = function () {
            console.log('开始滚动~~~')
            console.log(
                'document.body.scrollLeft: ', document.body.scrollLeft,
                'document.documentElement.scrollLeft: ', document.documentElement.scrollLeft
            )
        }

在这里插入图片描述

相关文章