【Javascript —— BOM】-CSDN博客

本文链接：https://blog.csdn.net/Rita_zf/article/details/125024614

本文详细介绍了浏览器对象模型(BOM)中的核心对象window及其方法，包括页面加载事件、浏览器尺寸控制、弹窗操作、导航历史管理等内容。同时，探讨了DOMContentLoaded与load事件的区别，并演示了如何使用这些事件进行页面元素的操作。

摘要由CSDN通过智能技术生成

javascript BOM

DOM：浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
Window 对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

浏览器顶级对象window
在这里插入图片描述
页面加载事件

load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等
DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

window对象

window.console.log(window);

显示很多window属性

在这里插入图片描述

加载


<body>
    <script>
        let btn = window.document.querySelector('#btn');
        btn.addEventListener('click',function (e) {
            window.alert('桃李不言下自成蹊');
        });
    </script>
    <button id="btn">按钮</button>
</body>

在这里插入图片描述

load

load 等页面内容全部加载完毕，包含页面dom元素、图片、flash 、css 等等，
加载速度慢性能不好
重复加载会将之前的onload内容覆盖
为了避免重复加载会将之前的onload内容覆盖可以使用事件监听

<body>
    <script>
        window.onload = function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert(btn01.innerText);
            });
            let btn02 = window.document.querySelector('#btn02');
            btn02.addEventListener('click', function (en) {
                window.alert(btn02.innerText);
            });
        }
        // 将之前的onload内容覆盖
        window.onload = function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert(btn01.innerText);
            });
        }
    </script>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
</body>

在这里插入图片描述

使load重复且不被覆盖的需要使用事件监听

<body>
    <script>
        window.addEventListener('load',function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert(btn01.innerText);
            });
            let btn02 = window.document.querySelector('#btn02');
            btn02.addEventListener('click', function (en) {
                window.alert(btn02.innerText);
            });
        });
        window.addEventListener('load',function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert('桃李不言');
            });
            let btn02 = window.document.querySelector('#btn02');
            btn02.addEventListener('click', function (en) {
                window.alert('下自成蹊');
            });
        });
    </script>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
</body>

DOMContentLoaded

DOMContentLoaded 等DOM加载完毕，不包含图片 flash css 等等。
加载速度快

<body>
    <script>
        window.addEventListener('DOMContentLoaded',function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert(btn01.innerText);
            });
            let btn02 = window.document.querySelector('#btn02');
            btn02.addEventListener('click', function (en) {
                window.alert(btn02.innerText);
            });
        });
        window.addEventListener('DOMContentLoaded',function (e) {
            let btn01 = window.document.querySelector('#btn01');
            btn01.addEventListener('click', function (en) {
                window.alert('桃李不言');
            });
            let btn02 = window.document.querySelector('#btn02');
            btn02.addEventListener('click', function (en) {
                window.alert('下自成蹊');
            });
        });
    </script>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
</body>

浏览器尺寸

innerWidth 浏览器可视区域宽度也即是页面宽度
outerWidth 浏览器窗口区域宽度是整个浏览器窗口的宽度是包括变蓝

    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        window.addEventListener('resize',function (e) {
            let div = window.document.querySelector('div');
            let array = new Array();
            array.push(`内部宽度: ${window.innerWidth} >>> 内部高度: ${window.innerHeight}`)
            array.push(`<br>`)
            array.push(`窗体宽度: ${window.outerWidth} >>> 窗体高度: ${window.outerHeight}`)
            div.innerHTML = array.join('');
        });
    });
</script>

在这里插入图片描述

浏览器弹窗

    <style>
        button{
            width: 300px;
            height: 100px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <button id="alter">alter</button>
    <button id="commit">commit</button>
    <button id="prompt">prompt</button>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let alter = window.document.querySelector('#alter');
        alter.addEventListener('click',function (e) {
            window.alert(this.innerText);
        });
        let commit = window.document.querySelector('#commit');
        commit.addEventListener('click',function (e) {
            console.log(window.confirm('是否确认'));
        });
        let prompt = window.document.querySelector('#prompt');
        prompt.addEventListener('click',function (e) {
            console.log(window.prompt('请输入密码'));
        });
    });
</script>

在这里插入图片描述

location和history

<body>
    <button id="href">href</button>
    <button id="assign">assign</button>
    <button id="replace">replace</button>
    <button id="reload">reload</button>
    <br>
    <button id="length">length</button>
    <button id="back">back</button>
    <button id="forward">forward</button>
    <button id="go">go</button>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let url = 'https://www.csdn.net/';
        let href = window.document.querySelector('#href');
        href.addEventListener('click',function (e) {
            // 返回完整的url
            window.location.href = url;
        });
        let assign = window.document.querySelector('#assign');
        assign.addEventListener('click',function (e) {
            // 载入新文档
            window.location.assign(url);
        });
        let replace = window.document.querySelector('#replace');
        replace.addEventListener('click',function (e) {
            // 用新的文档替换当前文档 不能返回前文档
            window.location.replace(url);
        });
        let reload = window.document.querySelector('#reload');
        reload.addEventListener('click',function (e) {
            // 重新载入当前文档
            // false F5 刷新
            // true ctrl + F5 彻底刷新 重新加载所有数据
            window.location.reload(true);
        });
        let length = window.document.querySelector('#length');
        length.addEventListener('click',function (e) {
            window.alert(window.history.length);
        });
        // back 后退
        let back = window.document.querySelector('#back');
        back.addEventListener('click',function (e) {
            window.alert(window.history.back());
        });
        // foeward 前进
        let forward = window.document.querySelector('#forward');
        forward.addEventListener('click',function (e) {
            window.alert(window.history.forward());
        });
        // 去具体页面
        // 正数 向前
        // 负数 后退
        let go = window.document.querySelector('#go');
        go.addEventListener('click',function (e) {
            window.alert(window.history.go(-1));
        });
    });
</script>

navigator

<script>
    console.log('浏览器代号 >>> ' + window.navigator.appCodeName);
    console.log('浏览器名称 >>> ' + window.navigator.appName);
    console.log('浏览器版本 >>> ' + window.navigator.appVersion);
    console.log('是否启用cookie >>> ' + window.navigator.cookieEnabled);
    console.log('硬件平台 >>> ' + window.navigator.platform);
    console.log('用户代理 >>> ' + window.navigator.userAgent);
</script>

显示用户信息
在这里插入图片描述

screen

<script>
    // 返回屏幕高度 不包含（window）任务栏
    window.document.writeln('可用高度 >>> ' + window.screen.availHeight);
    // 返回屏幕宽度 不包含（window）任务栏
    window.document.writeln('可用宽度 >>> ' + window.screen.availWidth);
    // 返回屏幕总高度
    window.document.writeln('总高度 >>> ' + window.screen.height);
    // 返回屏幕总宽度
    window.document.writeln('总宽度 >>> ' + window.screen.width);
    // 返回目标设备或缓冲器上的调色板比特深度
    window.document.writeln('颜色深度 >>> ' + window.screen.colorDepth);
    // 返回屏幕颜色分辨率(每像素位数)
    window.document.writeln('颜色分辨率 >>> ' + window.screen.pixelDepth);
</script>

在这里插入图片描述

同步

代码从上向下执行

<script>
    window.addEventListener('DOMContentLoaded', function (e) {
        let a = 10, b = 20, c = 30;
        window.console.log(a);
        for (let index = 0; index < 5; index++) {
            window.console.log(index);
        }
        window.console.log(b);
        for (let index = 0; index < 5; index++) {
            window.console.log(index);
        }
        window.console.log(c);
    });
</script>

在这里插入图片描述

异步

代码同时执行

<script>
    window.addEventListener('DOMContentLoaded', function (e) {
        let a = 10, b = 20, c = 30;
        window.console.log(a);
        for (let index = 0; index < 5; index++) {
            window.console.log(index);
        }
        setTimeout(() => {
            window.console.log(b);
        }, 1000 * 10);
        for (let index = 0; index < 5; index++) {
            window.console.log(index);
        }
        setTimeout(() => {
            window.console.log(c);
        }, 1000 * 5);
    });
</script>

setTimeout

setTimeout 设置延迟时间

<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        setTimeout(() => {
            window.alert('延迟执行');
        }, 1000*5);
    });
</script>

setInterval

<body>
    <button id="btn01">按钮01</button>
    <button id="btn02">按钮02</button>
    <span>10秒钟后进入CSDN页面</span>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let count = 10;
        function haha() {
            return setInterval(() => {
                if (count==1) {
                    window.location.href = 'https://www.csdn.net/';
                }else{
                    let span = window.document.querySelector('span');
                    span.innerText = `${--count}秒钟后进入CSDN页面`;
                }
            }, 1000);
        }
        let timer = haha();
        let btn01 = window.document.querySelector('#btn01');
        btn01.addEventListener('click',function (e) {
            clearInterval(timer);
        });
        let btn02 = window.document.querySelector('#btn02');
        btn02.addEventListener('click',function (e) {
            timer = haha();
        });
    }); 
</script>

在这里插入图片描述

sessionStorage

sessionStorage 临时存储
setItem 存值

<body>
    <button>按钮</button>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let operator = {
            name: '张三'
        };
        let btn = window.document.querySelector('button');
        btn.addEventListener('click',function (e) {
            // sessionStorage 临时存储 ( key value结构 值都是字符串)
            sessionStorage.setItem('operator',JSON.stringify(operator));
            window.location.href = './19_sessionStorage.html';
        });
    });
</script>

getItem 取值

<body>
    操作人:<span></span>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let json = sessionStorage.getItem('operator');
        console.log(json);
        if (json != null) {
            console.log(JSON.parse(json));
            let span = window.document.querySelector('span');
            span.innerText = JSON.parse(json).name;
        }
    });
</script>

localStorage

localStorage 本地存储

<body>
    <button>按钮</button>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let operator = {
            name: '张三'
        };
        let btn = window.document.querySelector('button');
        btn.addEventListener('click',function (e) {
            // localStorage 本地存储
            localStorage.setItem('operator',JSON.stringify(operator));
            window.location.href = './21_localStorage.html';
        });
    });
</script>

<body>
    操作人:<span></span>
</body>
</html>
<script>
    window.addEventListener('DOMContentLoaded',function (e) {
        let json = localStorage.getItem('operator');
        console.log(json);
        if (json != null) {
            console.log(JSON.parse(json));
            let span = window.document.querySelector('span');
            span.innerText = JSON.parse(json).name;
        }
    });
</script>

时间

<script>
    // GMT UTC
    // 1970-01-01 00:00:00
    // 1900-01-01 00:00:00
    let date = new Date();
    // Sun May 29 2022 15:59:35 GMT+0800(中国标准时间)
    console.log(date);
    // 2022 年
    console.log(date.getFullYear());
    // 2022 年
    console.log(date.getUTCFullYear());
    // 5 月
    console.log(date.getMonth()+1);
    // 29 日
    console.log(date.getDate());
    // 16 小时
    console.log(date.getHours());
    // 5 分钟
    console.log(date.getMinutes());
    // 43 秒钟
    console.log(date.getSeconds());
    // 546 毫秒数
    console.log(date.getMilliseconds());
    // 1653811175276 
    console.log(date.getTime());
    // Sun May 29 2022 15:59:35 GMT+0800 (中国标准时间)
    console.log(new Date(1653811175276));
    // Tue Oct 10 1995 08:00:00 GMT+0800 (中国标准时间)
    console.log(new Date('1995-10-10'));
    // Tue Oct 10 1995 10:00:00 GMT+0800 (中国标准时间)
    console.log(new Date('1995-10-10 10:00:00'));
</script>