JavaScript - WebAPI - BOM浏览器对象模型

最新推荐文章于 2022-12-11 11:32:22 发布

Henry_ww

最新推荐文章于 2022-12-11 11:32:22 发布

阅读量161

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119578721

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

1.1-BOM与DOM介绍

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

在这里插入图片描述

1.2-location对象🎈

1.location对象：包含当前页面的URL信息
- url：全球统一资源定位符
- url = 协议名（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" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>BOM - location对象</title>
    </head>
    <body></body>
    <script>
        // location对象:管理整个地址栏(url)
        console.log(location);

        // host:主机+端口
        // port:端口
        // href:整个url
        // search:搜索条件（数据)

        // console.log(location.hash);

        // 主机名 和 当前url的端口号
        console.log(location.host); //127.0.0.1:5500

        // 当前url的端口号
        console.log(location.hostname); //127.0.0.1

        // 完整的url
        console.log(location.href); // http://127.0.0.1:5500/day03/code/01%20-%20BOM%20-%20location%E5%AF%B9%E8%B1%A1.html

        // 当前url的路径
        console.log(location.pathname); // /day03/code/01%20-%20BOM%20-%20location%E5%AF%B9%E8%B1%A1.html

        // 当前url的端口号
        console.log(location.port); //  5500

        // 当前url的协议
        console.log(location.protocol); //  http:

        // 从 ? 到  开始的url(查询部分)
        // console.log(location.search);
    </script>
</html>

1.3-location对象三个事件🎈🎈

<!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>location对象 - 页面跳转</title>
    </head>
    <body>
        <button class="btn1">点我跳转 : 带历史,可以回来</button>
        <button class="btn2">刷新</button>
        <button class="btn3">点我跳转 : 不带历史,回不去</button>
    </body>
    <script>
        // document.querySelector(".bnt1").onclick = function () {
        //     // 报错:元素没获取到!
        //     // Cannot set properties of null (setting 'onclick')
        //     location.assign("http://www.baidu.com");
        // };

        // 1. location.assign('新的url') === location.href = '新的url'
        document.querySelector(".btn1").onclick = function () {
            // Cannot set properties of null (setting 'onclick')
            location.assign("http://www.baidu.com");
        };

        // 2.location.reload()
        document.querySelector(".btn2").onclick = function () {
            location.reload();
        };

        // 3.location.replace('新的url'):使用很少,替换(不会产生历史)
        document.querySelector(".btn3").onclick = function () {
            location.replace("http://www.baidu.com");
        };

        // 总结:使用较多的  location.assign('新的url') === location.href = '新的url'  和  location.reload()
    </script>
</html>

1.3-navigator对象

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

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

navigator对象:获取浏览器信息
可以用于判定用户的操作是否是window64位

<!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>BOM - navigator对象</title>
    </head>
    <body></body>
    <script>
        // navigator对象:获取浏览器信息

        console.log(navigator.appVersion);
        console.log(navigator.userAgent);

        // 判定  用户的操作是否是window64位
        // navigator.userAgent  有win64
        if (navigator.userAgent.toLowerCase().indexOf("win64") != -1 || navigator.userAgent.toLowerCase().indexOf("wow64") != -1) {
            console.log("windows  64操作系统");
        }
    </script>
</html>

1.4-history对象🎈

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

主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
history.forward():前进
history.back():后退

<!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>BOM - history对象</title>
    </head>
    <body>
        <button>回退</button>
    </body>
    <script>
        document.querySelector("button").onclick = function () {
            // 1.back():回退1步
            // history.back()

            // 2.go(负数):也可以回退
            // history.go(-1);

            // 刷新
            history.go(); //history.go(0)
        };
    </script>
</html>

1.5-window对象

1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象
- (1).所有的全局变量（var声明的）都是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="zh-CN">

<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>window对象 - 基础</title>
</head>

<body>
    <script>
        // window对象: 是DOM和BOM的顶级对象

        // 1. 顶级对象
        // console.log(window)

        // 2. 任何地方: 但凡没有关键字声明的变量, 都属于window
        a_outer = 1

        // 3. 所有有名函数: 都属于window对象
        function fn() {
            a_inner = 2
        }

        fn()
        console.log(window)
        // 注意: 使用变量必须加关键字

        // 4. window下有一个特殊的属性: name,永远是字符串(var声明的name最终都会变成字符串)
        var name = { name: '安琪拉', age: 18 }
        console.log(name)                       // [object Object] 字符串

        // var声明的全局变量name, 本质就是window.name
        // window.name 保存的一定是字符串: 不是字符串也会变成字符串

        // ES5开发,name只用来保存字符串
        // ES6不受影响: ES6的全局变量属于script,ES5的全局变量就属于window对象

    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

<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>window对象 - 操作窗口</title>
</head>

<body>
    <button class="open">打开</button>
    <button class="close">关闭</button>

    <script>
        // 通过事件: 学习window对象控制窗口

        // window.open()打开新窗口
        // 窗口对象(window对象).close()关闭指定窗口

        let w
        document.querySelector('.open').onclick = function () {
            // 1. 空白: open()
            // open()                      // 新页签, 打开空白窗口

            // 2. 指定url: open(url)
            // open('http://www.baidu.com') // 打开指定窗口

            // 3. 控制打开的位置(自己页面还是新页面(默认)): open(url,'位置:_blank || _self')
            // open('http://www.baidu.com', '_self')

            // 4. 控制窗口大小和停留(都是新窗口): open(url,'位置','大小控制: left,top,width,height')
            // open('http://www.baidu.com', '_blank', 'width=200,height=200,left=200,top=200')
            // 偏移是相对电脑屏幕左上角

            // open()打开窗口后,会返回新窗口的window对象
            w = open('http://www.baidu.com')
            console.log(w)
        }

        // 关闭
        document.querySelector('.close').onclick = function () {
            // 1. 关闭自己: window.close()
            // window.close()

            // 谷歌:不允许自己关闭(只能关闭使用window.open()打开的窗口)

            // 2. 关闭其他窗口: 其他窗口的window对象.close()
            w.close()
        }

        // 总结
        // 告知:是我的义务, 用不用是企业的选择(企业不用了), 用a链接完全可以搞定
    </script>
</body>

</html>

window事件

<!DOCTYPE html>
<html lang="zh-CN">

<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>window - 事件</title>
    <script>
        // 获取元素
        // const box = document.querySelector('.box')
        // console.log(box)

        // onload:加载事件(只针对window对象)
        // window.onload = function(){}
        window.onload = function () {
            const box = document.querySelector('.box')
            console.log(box)
        }

        // 优点1: 允许js写在html的上面(有利于代码分离管理)
        // 优点2: onload是一个函数, 函数里面定义的变量: 局部变量(安全)
    </script>
</head>

<body>
    <div class="box">小马哥</div>
    <img src="images/qingjieyongpin.jpg" alt="">

    <!-- 实际开发中: 建议大家把js的引入放到body的关闭标签之上(所有结构都加载完毕) -->

    <script>
        // 阻止页面销毁事件: onbeforeunload 在页面被卸载之前触发
        window.onbeforeunload = function () {
            // console.log(1)

            // 触发形式: 刷新\前进\后退\关闭

            // 注意事项
            // alert('滚')
            // Blocked alert('滚') during beforeunload. // onbeforeunload里面不允许使用alert

            // 如果真要阻止: 必须要有return
            return '真的要离开我吗?'

            // 不是return会必然触发: 一定需要用户交互
            // onbeforeunload: 是因为用户可能写了数据,不小心误触了销毁操作, 是用来提示用户保存数据的

            // 不交互: 没有数据, 不会触发(触发了,不会有效果)
            // 以后浏览器: 估计不会再支持了
        }
    </script>

    <!-- 总结
        window.onload是有用的: 其他没用(现在不用了)
    -->
</body>

</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - BOM浏览器对象模型

1.1-BOM与DOM介绍JavaScript语言由三部分组成ECMAJavaScript：定义了js的语法规范Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象 * Dom定义了一套操作HTML文档的API（节点的增删改查）Bom：Browser object model浏览器对象模型例如：一个浏览器的窗口就是一个window对象 * Bom定义了一套操作浏览器窗口的APIBom主要由五大对象组成：
复制链接

扫一扫