ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

BOM五大对象

2021-12-19 21:04:05  阅读：268  来源： 互联网

标签：console log 对象 window BOM 五大 浏览器 document location


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>

标签：console,log,对象,window,BOM,五大,浏览器,document,location
来源： https://blog.csdn.net/cs1330/article/details/122029437

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有