• 【JavaScript】掌握BOM浏览器对象模型

    🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

    🍇个人主页：亦世凡华、的博客

    🍓系列专栏：JavaScript专栏

    🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

    目录

    🏆BOM概述

    🍇BOM的构成

    🍈窗口加载事件

    window.onload

    window.addEventListener

    DOMContentLoaded 

    🍉窗口调整大小事件

    🏆BOM概述

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

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

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

    DOM和BOM的区别
    DOMBOM
    文档对象模型浏览器对象模型
    DOM就是把[文档]当作一个[对象]来看待BOM就是把[浏览器]当作一个[对象]来看待
    DOM的顶级对象是documentBOM的顶级对象是window
    DOM主要学习的是操作页面元素BOM主要学习的是浏览器窗口交互的一些对象
    DOM是W3C标准规范BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

    🍇BOM的构成

    BOM比DOM更大，它包含DOM

    window对象是浏览器的顶级对象，它具有双重角色

    1.它是JS访问浏览器窗口的一个接口

    2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法

    在调用时可以省略window，如使用alert();、prompt();等。

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

    🍈窗口加载事件

    window.onload

    window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS、文件等)的调用处理函数。简言之：window.onload会等所有事件加载完成后在执行，所以其JS代码可以放在任何地方。

    1. // 格式如下
    2. window.onload = function(){}
    3. // 或者
    4. window.addEventListener('load',function(){});
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         window.onload = function(){
    12.             var btn = document.querySelector('button');
    13.             btn.addEventListener('click',function(){
    14.                 alert('Hello World')
    15.             })
    16.         }
    17.     script>
    18.     <button>按钮button>
    19. body>
    20. html>

    注意：

    1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，在去执行处理函数。

    2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个为准。

    3.如果使用addEventListener则没有限制。

    window.addEventListener

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         window.addEventListener('load',function(){
    12.             var btn = document.querySelector('button');
    13.             btn.addEventListener('click',function(){
    14.                 alert('Hello World')
    15.             })
    16.         })
    17.         window.addEventListener('load',function(){
    18.             alert('你好 世界')
    19.         })
    20.     script>
    21.     <button>按钮button>
    22. body>
    23. html>

    DOMContentLoaded 

    document.addEventListener('DOMContentLoaded',function(){})

    DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等，所以加载速度比 load 更块一些。ie9以上才支持，如果页面的图片很多的话，从用户访问到onload触发可能需要较长时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded时间比较合适。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.         window.addEventListener('load',function(){
    12.             var btn = document.querySelector('button');
    13.             btn.addEventListener('click',function(){
    14.                 alert('Hello World')
    15.             })
    16.         })
    17.         window.addEventListener('load',function(){
    18.             alert('你好 世界')
    19.         })
    20.         document.addEventListener('DOMContentLoaded',function(){
    21.             alert('我先执行的哦')
    22.         })
    23.     script>
    24.     <button>按钮button>
    25. body>
    26. html>

    🍉窗口调整大小事件

    1. window.onresize = function(){}
    2. window.addEventListener('resize',function(){})

    window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。

    注意：

    1.只要窗口大小发生像素变化，就会触发这个事件。

    2.window.innerWidth当前屏幕的宽度，经常用这个事件完成响应式布局。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: #008c8c;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.     <script>
    18.         window,addEventListener('load',function(){
    19.             var div = document.querySelector('div');
    20.             window.addEventListener('resize',function(){
    21.                 console.log(window.innerWidth);
    22.                 console.log('变化了');
    23.                 if(window.innerWidth<=600){
    24.                     div.style.display = 'none'
    25.                 }else{
    26.                     div.style.display = 'block'
    27.                 }
    28.             })
    29.         })
    30.     script>
    31.     <div>div>
    32. body>
    33. html>

    🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

    呜呜~，原创不易。

  • 相关阅读:
    C++小游戏视频及资料集（一）
    如何实现网站首页变为黑白色？
    如何使用Python进行数据分析？
    Linux知识
    吃透Redis（三）：数据结构篇-skiplist、quicklist、listpack
    数栈xAI：轻量化、专业化、模块化，四大功能革新 SQL 开发体验
    通俗易懂的java设计模式（1）-单例模式
    第三次国土调查数据库字母缩写代表含义
    物理层
    为什么多数情况下GPT-3.5比LLaMA 2更便宜？
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126002493