BOM五大对象

2023-10-03 19:43:28

01-BOM浏览器对象模型

1.1-BOM与DOM介绍

JavaScript语言由三部分组成
- ECMAJavaScript：定义了js的语法规范
Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象
- Dom定义了一套操作HTML文档的API（节点的增删改查）
Bom：Brower object model浏览器对象模型例如：一个浏览器的窗口就是一个window对象
- Bom定义了一套操作浏览器窗口的API
Bom主要由五大对象组成：
- window:浏览器核心对象
- location：包含当前页面的URL信息
- history：history对象主要用于记录你当前窗口的历史记录
- navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等
- screen：获取用户电脑的屏幕分辨率
  - 这个一般不用，因为对开发者没啥作用

1.2-window对象

1.window对象：指的是当前浏览器窗口，它是JS中的*对象
- (1).所有的全局变量都是window对象的属性：最*的对象
  - document对象
  - bom对象
  - 全局的方法：alert(),setInterval()...........
- (2).只要是window的属性和方法，在使用的时候都可以省略window
  - 例如：window.alert() 可以省略window写成alert()
  - 例如：window.document 可以省略window写成document
- (3).window对象有一个特殊属性叫做name
  - 它永远都是一个字符串，无论给他赋什么值

2.window对象有两个常用的方法：open()与close()

open():打开一个窗口

close():关闭一个窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="点我打开一个新窗口" id="open">
<input type="button" value="点我有惊喜" id="close">

</body>

<script>
    /*1.window对象：指的是当前浏览器窗口，它是JS中的*对象
        * (1).所有的全局变量都是window对象的属性：最*的对象
            * document对象
            * bom对象
            * 全局的方法：alert(),setInterval()...........
         * (2).只要是window的属性和方法，在使用的时候都可以省略window
            * 例如：window.alert()  可以省略window写成alert()
            * 例如：window.document 可以省略window写成document
         * (3).window对象有一个特殊属性叫做name
            * 它永远都是一个字符串，无论给他赋什么值
            *
       2.window对象有两个常用的方法：open()与close()
            * open():打开一个窗口
            * close():关闭一个窗口

     */

    //1.window是*对象，所有的全局变量都是window对象的属性
    let age = 18;
    console.log ( window.age );

    //2.只要是window对象的属性和方法，window可以省略
    console.log ( window.document === document );true

    //3.window有一个特殊的属性叫做name，它永远都是一个字符串
    console.log ( window.name );//默认是一个空字符串
    window.name = 123456;
    console.log ( name );//永远都是一个字符串
    //就算你重新声明一个变量叫做name，也无法覆盖它
    let name = [123];
    console.log ( name );

    //打开新窗口
    document.getElementById('open').onclick = function (  ) {
        /**
        * @param 第一个参数：URL  要打开的窗口网址
         * @param 第二个参数：类似于a标签的target属性，是替换当前窗口还是新开一个窗口
         * @param 第三个参数：新窗口特征：大小和位置等(新窗口才有效_blank)
         * @param 第四个参数：布尔类型  true/false:把新开的窗口加入/不加入到浏览器历史记录
         * @return 新打开的window对象
        */
       let newWindow = window.open('https://www.baidu.com', '_blank', 'top=100,left=100,width=500,height=300', true );
    }

    //关闭窗口
    document.getElementById('close').onclick = function (  ) {
        //参数就是你想要关闭的窗口对象，如果不写，默认就是关闭自己
        //1.这样写如果关闭的是*窗口谷歌和火狐会失效，如果失效可以使用下面这种写法
        //window.close( );

        /*2.谷歌火狐为了安全起见会拦截我们的代码，js代码只能关闭用js代码打开的界面，
        所以我们用js先假装在当前窗口打开自己，然后再关闭自己*/
        //这里的url不是空字符串""，而是一个空格字符串  " "
        window.open(" ","_self").close();
    }
</script>
</html>

1.3-window对象三个事件

window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

1.window.onload:界面上所有的内容加载完毕之后才触发这个事件
2.window.onbeforeunload:界面在关闭之前会触发这个事件

3.window.onunload:界面在关闭的那一瞬间会触发这个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script>
    /*window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

    1.window.onload:界面上所有的内容加载完毕之后才触发这个事件

    2.window.onbeforeunload:界面在关闭之前会触发这个事件

        3.window.onunload:界面在关闭的那一瞬间会触发这个事件

     */

    //由于我们script标签写在了body标签的上面，这行代码会在body内容还未加载的时候就执行
    console.log ( document.getElementById ( "p1" ) );//null  此时编译器还未解析p标签

    //1.window.onload：界面上所有内容加载完毕后会触发
    window.onload = function ( ) {

        // 由于编译器是从上往下解析html文件的，如果我们的js代码写在body前面，就有可能无法获取dom对象
        console.log ( "当前界面全部加载完毕" );
        //window.onload无论写在界面什么位置都是等整个界面加载完毕之后才会执行
        console.log ( document.getElementById ( "p1" ) );
    }

    //2.window.onbeforeunload:界面在关闭前触发
    window.onbeforeunload = function (  ) {
        /*  1.这个方法主要用于在界面关闭之前保存一些重要数据
        *  2.也可以弹出一个提示框挽留一下用户
        * */

        //return 内容：浏览器会自动弹出一个挽留窗口
        //谷歌和火狐都会拦截这种恶心事，只有IE支持
        return '你真的要狠心抛弃我吗';
    }

    //3 window.onunload:界面关闭时触发
    window.onunload = function (  ) {

        console.log('界面正在关闭');

    }
</script>

<body>

<p id="p1">我是p标签</p>
</body>


</html>

1.4-location对象

1.location对象：包含当前页面的URL信息
- location.href：全球统一资源定位符
- location.href = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
- 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解

2.location对象有三个常用的方法

（1）打开新网页：location.assign('你要打开的新网页的url')
（2）替换当前网页：location.replace('要替换的网页url')

(3) 刷新当前网页: location.reload()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" id="assign" value="assign打开新网页">
<br>
<input type="button" id="replace" value="replace替换当前网页">
<br>
<input type="button" id="reload" value="reload刷新当前网页">
<br>

</body>

<script>
    /*1.location对象：包含当前页面的URL信息
        * url：全球统一资源定位符
        * url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
        * 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解

      2.location对象有三个常用的方法
            * （1）打开新网页：location.assign('你要打开的新网页的url')
            * （2）替换当前网页：location.replace('要替换的网页url')
            *   (3)  刷新当前网页: location.reload()
     */

    //1.location对象信息查看
    console.log ( window.location );//location对象
    console.log(location.hash);//资源定位符（锚点定位）
    console.log(location.host);//主机   host = hostname + port
    console.log(location.hostname);//主机名（ip地址）
    console.log(location.port);//端口号
    console.log(location.href);//完整的url路径
    console.log(location.pathname);//资源路径
    console.log(location.protocol);//url的协议
    console.log(location.search);//url请求的参数

    //2.assign：打开新网页
    document.getElementById('assign').onclick = function (  ) {
        //会留下历史记录（可以回退）
        window.location.assign('http://www.itheima.com');
        //上面这行代码等价于下面这行代码
        //window.location.href = 'http://www.itheima.com';
    }

    //3.replace:替换当前网页
    document.getElementById('replace').onclick = function (  ) {
        //不会留下历史记录（不能回退）
        window.location.replace('http://www.itcast.com');
    }

    //4.刷新当前网页
    document.getElementById('reload').onclick = function (  ) {
        //相当于按了F5刷新当前网页
        window.location.reload();
    }

</script>
</html>

1.5-history对象

history对象主要用于记录你当前窗口的历史记录

主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
history.forward():前进
history.back():后退
跳转指定页数： history.go( 数字 ) :正数：前进几页 1：前进下一页 , 负数：回退几页 -1：返回上一页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="09-history测试页.html">点我跳转</a>
<input type="button" value="前进" id="forword">
</body>

<script>
    /*history对象主要用于记录你当前窗口的历史记录
        * 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
        * history.forward():前进
        * history.back():后退
     */

    document.getElementById('forword').onclick = function (  ) {
        //跳转到当前网页历史记录的下一页，如果没有下一页的历史记录，则不跳转
        history.forward();
    }
</script>
</html>

1.6-navigator对象

navigator对象：包含当前浏览器的信息

工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    /*navigator对象：包含当前浏览器的信息
        工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

     */

    console.log ( navigator );//navigator对象
    console.log ( navigator.appVersion );//当前浏览器版本信息
    console.log ( navigator.platform );//当前浏览器的硬件平台
    console.log ( navigator.userAgent );//当前浏览器信息

    //使用场景1：判断当前用户的操作系统是32位还是64位
    //谷歌和IE  64位显示WOW64    火狐显示Win64
    if(navigator.userAgent.indexOf('WOW64') != -1 || navigator.userAgent.indexOf('Win64') != -1){
        console.log ( "64位" );
    }else{
        console.log ( "32位" );
    }

    //使用场景2：判断用户当前使用哪种浏览器
    if(navigator.userAgent.indexOf('Chrome') != -1){
        console.log ( "谷歌浏览器" );
    }else if(navigator.userAgent.indexOf('Firefox') != -1){
        console.log ( "火狐浏览器" );
    }else{
        console.log ( "IE浏览器" );//也有可能是其他小众浏览器，可以忽略不计
    }

</script>
</html>

==02-localstorage与sessionstorage==

localStorage:本地存储
- 将数据存储到浏览器

语法

存：localStorage.setItem('属性名',属性值)

取：localStorage.getItem('属性名') 有返回值

删： localStorage.removeItem('属性名')

清空： localStorage.clear()

3.注意点

a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

b.永久存储。除非自己删，否则一直存在于浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn1">存储据</button>
    <button id="btn2">取储据</button>
    <button id="btn3">删储据</button>
    <button id="btn4">清空储据</button>

    <script>
        /* 
            1.localStorage:本地存储
                将数据存储到浏览器

            2.语法
                存：  localStorage.setItem('属性名','属性值')
                取：  localStorage.getItem('属性名')
                删：  localStorage.removeItem('属性名')
                清空： localStorage.clear()

            3.注意点
                a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
                b.永久存储。除非自己删，否则一直存在于浏览器
         */


        //存
        document.getElementById('btn1').onclick = function(){
            localStorage.setItem('name','班长');
            localStorage.setItem('age',18);
            localStorage.setItem('girlFriend',['苍老师','波多老师','吉泽老师']);
        }

        //取
        document.getElementById('btn2').onclick = function(){
            let age = localStorage.getItem('age');
            console.log(age); 
        }

        //删
        document.getElementById('btn3').onclick = function(){
            localStorage.removeItem('girlFriend'); 
        }

        //清空:一次性删除所有数据
        document.getElementById('btn4').onclick = function(){
            localStorage.clear(); 
        }
    </script>
</body>
</html>

1.2-sessionStorage

1.sessionStorage相当于短命版的localStorage，其他用法完全一致

2.两者区别：HP值不同

localStorage：永久存储（存在硬盘，HP值无限）

sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn1">存储据</button>
    <button id="btn2">取储据</button>
    <button id="btn3">删储据</button>
    <button id="btn4">清空储据</button>

    <script>
        /* 
            1.sessionStorage相当于短命版的localStorage，其他用法完全一致

            2.两者区别：HP值不同
                localStorage：永久存储（存在硬盘，HP值无限）
                sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

         */


        //存
        document.getElementById('btn1').onclick = function(){
            sessionStorage.setItem('name','班长');
            sessionStorage.setItem('age',18);
            sessionStorage.setItem('girlFriend',['苍老师','波多老师','吉泽老师']);
        }

        //取
        document.getElementById('btn2').onclick = function(){
            let age = sessionStorage.getItem('age');
            console.log(age); 
        }

        //删
        document.getElementById('btn3').onclick = function(){
            sessionStorage.removeItem('girlFriend'); 
        }

        //清空:一次性删除所有数据
        document.getElementById('btn4').onclick = function(){
            sessionStorage.clear(); 
        }
    </script>
</body>
</html>

1.3-案例：页面间传值

页面A

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="name" type="text" placeholder="请输入用户名"><br>
    <input class="password" type="text" placeholder="密码"> <br>
    <button class="btn">下一步</button>
    <script>
        // 获取按钮
        document.querySelector('.btn').onclick = function () {
            // 获取用户输入的数据存到内存中   获取用户输入数据
            let name = document.querySelector('.name').value
            let password = document.querySelector('.password').value
            
            // 将数据临时存到内存中
            sessionStorage.setItem('name', name)
            sessionStorage.setItem('password', password)
            // 跳转B页面
            location.href = './页面传值B.html'
        }
    </script>
</body>

</html>

页面B

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input class="email" type="text" placeholder="请输入邮箱"><br>
    <input class="phone" type="text" placeholder="请输入电话"><br>
    <button class="btn">注册</button>
    <script>
        // 获取按钮
        document.querySelector('.btn').onclick = function () {
            // 获取用户输入的数据 和A页面的数据
            let email = document.querySelector('.email').value
            let phone = document.querySelector('.phone').value

            // 获取内存中的用户所输入的数据                 
            let name = sessionStorage.getItem('name')
            let password = sessionStorage.getItem('password')

            // 在控制台打印输入数据
            console.log(name, password, email, phone);
        }
    </script>
</body>

</html>

03-localStorage如何存储对象类型数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">存数据</button>
    <button class="btn1">取数据</button>
    <script>
        let obj = {
            name: '陈爽',
            age: '19'
        }
        // 获取页面的元素
        document.querySelector('.btn').onclick = function () {
            // 将js对象的数据临时存到内存总
            // 将数据转为json格式
            let json = JSON.stringify(obj)
            // 将转换的数据存到内存中
            sessionStorage.setItem('name', json)
        }

        document.querySelector('.btn1').onclick = function () {
            // 取到内存中用户存到的数据
            let index = sessionStorage.getItem('name')
            // 先将用户的json数据转为js的格式
            let obj = JSON.parse(index)
            console.log(obj);
        }

    </script>
</body>

</html>

案例：后台管理系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: cyan;
        }

        .login_form_con {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -155px;
            width: 400px;
            height: 310px;
            background-color: #edeff0;
            text-align: center;
        }

        .login_title {
            height: 50px;
            font-size: 30px;

        }

        input {
            width: 80%;
            height: 50px;
            ;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="login_form_con">
        <div class="login_title">后台管理系统</div>
        <div class="login_form">
            <input type="text" class="input_txt" placeholder="邮箱/手机号">
            <input type="password" class="input_pass" placeholder="密码">
            <input type="submit" class="input_sub" value="登 录">
        </div>
    </div>
    <script>
        /*
        1.分析需求(交互)：
            点击登录按钮 ： (1)判断用户名密码长度  ：  全部大于6 登录成功
                           (2)如果登录成功
                                (2.1)将用户名和密码写入本地存储，下一次登录时直接显示用户名和密码
                                (2.2)跳转网页 http://www.itheima.com

                
        2.思路分析（事件三要素）
            获取元素：事件源：
            注册事件：事件类型
            事件处理：
        */

        // 获取页面交互元素
        let input_txt = document.querySelector('.input_txt') //邮箱
        let input_pass = document.querySelector('.input_pass')  // 密码
        let input_sub = document.querySelector('.input_sub') //登录按钮

        // 给按钮注册点击事件
        input_sub.onclick = function () {
            // 非空判断
            if (input_txt.value.length <= 6 || input_pass.value.length <= 6) {
                alert('登录失败')
            } else {
                // 将用户输入的用户名和密码存到硬盘当中
                localStorage.setItem('name', input_txt.value)
                localStorage.setItem('username', input_pass.value)
                alert('登录成功')
                // 用户登录成功  然后跳转页面
                location.href = 'http://www.itheima.com'
            }
        }
        // 用户重新登录页面的时候账号密码也存在
        // 取到的数直接存到用户名和密码上
        input_txt.value = localStorage.getItem('name')
        input_pass.value = localStorage.getItem('username')



    </script>
</body>

</html>

码农公寓