Js——BOM初学

最新推荐文章于 2023-05-04 18:39:23 发布

不倒翁丶

最新推荐文章于 2023-05-04 18:39:23 发布

阅读量192

点赞数 1

分类专栏：前端初学文章标签： web html html5 node.js

本文链接：https://blog.csdn.net/weixin_46059971/article/details/106104747

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

初学

3 篇文章 0 订阅

订阅专栏

<BOM 简介>

吾有几许肺腑若伊得闲可愿受此叨扰之苦…

一、何为 BOM

BOM：Browser Object Model 浏览器对象模型。

友情提示：BOM超脱三界之外，不在五行之中；(没有标准)

二、BOM 组成

Window 对象（核心+全局对象）
    |——	Document对象（DOM树结构入口）
    	|—— <html>
    		|—— <head>
    			|—— <meta>
    			|—— <title>
    		|—— <body>
    |——	Navigator 对象（导航）
    |——	History 对象（存储你访问的浏览器地址—历史记录）
    |——	Location 对象（地址对象——url）
    |——	Screen 对象（屏幕操作）

三、Window 对象

window 对象：运行HTML页面浏览器的窗口。

window 双重身份：

JavaScript 逻辑访问浏览器窗口的——对象；
ECMAScript 规范中的——Global全局对象；

全局对象：在浏览器运行环境中，全局作用域的对象、方法、属性都时window 对象的对象、属性、方法；（window可直接调用）

全局对象

Let’s Coding:

   <script>

        console.log("--------------------------全局属性--------------------------");

        // 全局变量 v ——> 全局变量 window 对象的属性
        var v = 100;
        console.log("v：",v);
        console.log("window.v：",window.v);

        console.log("--------------------------全局方法--------------------------");

        // 全局方法
        function fun(){
            console.log("window.fun()：function exists");
        }
        window.fun();

        console.log("--------------------------删除属性--------------------------");

        // 删除对象属性
        delete window.v;
        console.log("已执行：delete window.v; //操作");
        console.log("window.v：",window.v);

        console.log("--------------------------允许省略--------------------------");
        console.log("v：",v);
        // 1. window 对象是浏览窗口的顶级对象；
        // 2. 允许不使用 window. 调用其属性或方法；
        // 3. 其他5个BOM对象都是作为window对象的属性出现的；

        console.log("--------------------------document--------------------------");

        console.log("window.document：",window.document);

        console.log("--------------------------窗口宽高--------------------------");
        // innerWidth   innerHeight  内部宽高属性（空白位置——常用）
        // outterWidth  outterHeight 外部宽高属性（包括菜单、页签、工具栏总宽度）
        console.log("innerWidth：",window.innerWidth,"innerHeight:",window.innerHeight);
        console.log("outterWidth：",window.outterWidth,"outterHeight:",window.outterHeight);
        var img = document.getElementById("th");
        // 窗口大小变化时触发 resize
        window.addEventListener("resize",function(){
            console.log("innerWidth：",window.innerWidth,"innerHeight:",window.innerHeight);
        })

        console.log("--------------------------窗口self--------------------------");
        // window 对象的 self 属性 —— self：只读属性

        console.log("--------------------------对象方法--------------------------");
        // 1. 系统提示窗口 alter()       —— 不可更改样式
        // 2. 打开窗口 open(连接地址)
        // 3. 显示模型对话框 showModalDialog()
        // 4. 系统确认框 confirm('确认了！')  —— 返回一个 true 或 false
        // 5. 定时器 （页面动画效果）；

    </script>