JavaScript：浏览器对象模型BOM

于 2024-11-15 15:30:28 发布
阅读量884 收藏 10
点赞数 30
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_86036532/article/details/143800023
版权

BOM介绍

浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。

BOM与DOM区别

DOM是文档对象模型，把文档当做对象来看待，它的顶级对象是document，我们主要学习的是操作页面元素。DOM是W3C标准规范。

BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window，我们主要学习的是浏览器窗口交互的一些对象。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

 

window对象

  1. window 对象是一个全局对象，也可以说是 JavaScript 中的顶级对象
  2. 像 document、alert()、console.log()这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的
  3. 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
  4. window 对象下的属性和方法调用的时候可以省略 window      

window对象常见事件 

窗口加载事件        

  1. window.onload   

window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

 onload 页面加载事件有两种注册方式：

//方式1

 window.οnlοad=function(){}

//方式2

 window. addEventListener(‘load’,function(){})                                  

演示案例：

<body>

    <input type="button" name="" id="" value="按钮">

    <script>

        window.addEventListener('load', function() {

            // 当页面加载完成后执行的代码

            alert('kiss me');

           

            var btn = document.querySelector('input');

            btn.addEventListener('click', function() {

                alert('hug me');

            });

        });

    </script>

</body>

需要注意的是，window.onload注册事件的方式只能写一次，如果有多个，会以最后一个window.onload为准。如果使用addEventListener则没有限制。

  1. document.DOMContentLoaded 

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。le9以上才支持

如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

load 等页面内容全部加载完毕，包含页面dom元素，图片，f1ash， css等等

DOMContentLoaded是DOM加载完毕，不包含图片falsh css 等就可以执行，加载速度比load更快一些

<body>

    <input type="button" value="按钮">

    <script>

        window.addEventListener('load',function(){

            var btn=document.querySelector('input')

            btn.addEventListener('click',function(){

                alert('hug me')

            })

        })

        window.addEventListener('load',function(){

            alert('kiss me')

        })

        document.addEventListener('DOMContentLoaded',function(){

            alert('lalala')

        })

//1oad 等页面内容全部加载完毕，包含页面dom元素图片f1ash css等

//DoMcontentLoaded是DOM加载完毕，不包含图片falshcss等就可以执行加载速度比1oad更快一些

    </script>

</body>                                                                          

调整窗口大小事件

当调整window窗口大小时，就会触发window.onload事件，调用 事件处理函数，该事件有两种注册方式：

 //方式1

 window.οnresize=function(){}

//方式2

Window.addEventListener(‘resize’,function(){})  

利用页面加载事件和调整窗口大小事件，完成响应式布局，示例代码如下：

<style>

        div{

            width: 200px;

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div></div>

    <script>

        window.addEventListener('load',function(){

            var div=document.querySelector('div')

            window.addEventListener('resize',function(){

                if(window.innerWidth<=800){

                    div.style.display='none'

                }else{

                    div.style.display='block'

                }

            })

        })

    </script>

</body

定时器

定时器方法

在JavaScript中，提供了两组方法用于定时器的实现，具体方法如下：

定时器方法：

方法

说明

setTimeout()

在指定的毫秒数后调用函数或执行一段代码

setInterval()

按指定的周期（以毫秒计）来调用函数或执行一段代码

clearTimeout()

取消由setTimeout()方法设置的定时器

clearInterval()

取消由setInterval（）设置的定时器

在实际开发中，我们可以使用setTimeout（）方法实现函数的一次调用，并且可以通过clearTimeout（）清除定时器

location对象

location对象比较特别，它既是window对象的属性，同时也而是document对象的属性，window.location等同于document.location,它们是引用了同一个对象。Location对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的URL。

location URL的示例：

 示例1：

protocol://host[:port]/path/[?query]#fragment

示例2：

http：//www.example.com:80/web/index.html?a=3&b=4#res 

location URL的组成

各部分

说明

protocol

网络协议，常用的如http、ftp、mailto等

host

服务器的主机名，如www.example.com

port

端口号，可选，省略时使用协议的默认端口，如http默认端口为80

path

路径，如“/web/index.html”

query

参数，为键值对的形式，通过“&”符号分割，如“a=3&b=4”

fragment

锚点，如“#res”，表示页面内的锚点

案例：获取URL参数

  1. 创建login.html登录页面，搭建表格结构，示例代码如下：
<body>

    <form action="index.html">

        用户名：<input type="text" name="uname">

        <input type="submit" value="登录">

    </form>

</body>

上述代码中用action属性把表单提交到index.html页面

Index.html代码示例如下：

<body>  

    <div></div>

    <script>

        console.log(location.search)

        var params=location.search.substr(1)

        console.log(params)

        var arr=params.split('=')

        console.log(arr)

        var div=document.querySelector('div')

        div.innerHTML=arr[1]+'欢迎您'

    </script>

</body>

location 的常用方法

方法

说明

assign()

载入一个新文档

reload()

重新加载当前文档

replace()

用新的文档替换当前文档，覆盖浏览器当前文档

location.assign() 可以立即打开一个新的浏览器位置，并生成一条新的历史记录，接受的参数为URL地址

reload（）方法的唯一参数，是一个布尔类型的值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新按钮

replace（）方法的作用是使浏览器的位置发生改变，并且禁止在浏览器历史记录中生成新的记录，它只接受一个要导航到的URL参数，而且在调用replace（）方法后，用户不能返回到前一个页面

示例代码：

<body>

    <input type="button" value="按钮1" class="one">

    <input type="button" value="按钮2" class="two">

    <input type="button" value="按钮3" class="three">

    <script>

        const btn1=document.querySelector('.one')

        const btn2=document.querySelector('.two')

        const btn3=document.querySelector('.three')

        btn1.addEventListener('click',()=>{

            location.assign("https://blog.youkuaiyun.com/")

        })

        btn2.addEventListener('click',()=>{

           location.reload()

        })

        btn3.addEventListener('click',()=>{

           location.replace('https://www.baidu.com/')

        })

    </script>

</body>

navigator 对象

navigator 是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

• 通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）

(function () {

const userAgent = navigator.userAgent

// 验证是否为 Android 或 iPhone

const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)

const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)

// 如果是 Android 或 iPhone，则跳转至移动站点

if (android || iphone) {

location.href = 'http://m.itcast.cn'

}})();

histroy 对象

history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等

使用场景

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

history对象的属性和方法

分类

名称

说明

属性

length

返回历史列表中的网址数

方法

back（）

加载history列表中的前一个URL

forward（）

加载history列表中的下一个URL

go（）

加载history列表中的某一个具体页面

<body>

    <button class="back">←后退</button>

    <button class="forward">前进→</button>

    <script>

    // histroy 对象

    // 1.前进

    const forward = document.querySelector('.forward')

    forward.addEventListener('click', function () {

    // history.forward()

    history.go(1)

     })

    // 2.后退

    const back = document.querySelector('.back')

    back.addEventListener('click', function () {

    // history.back()

    history.go(-1)

     })

    </script>

本地存储（今日重点）

本地存储：将数据存储在本地浏览器中

常见的使用场景：

https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

好处：

1、页面刷新或者关闭不丢失数据，实现数据持久化

2、容量较大，sessionStorage 和 localStorage 约 5M 左右

localStorage（重点）

作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

特性：以键值对的形式存储，并且存储的是字符串， 省略了 window

 

<body>

<script>

// 本地存储 - localstorage 存储的是字符串

// 1. 存储

localStorage.setItem('age', 18)

// 2. 获取

console.log(typeof localStorage.getItem('age'))

// 3. 删除

localStorage.removeItem('age')

</script>

</body>

sessionStorage（了解）

特性：

• 用法跟 localStorage 基本相同

• 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

存储：sessionStorage.setItem(key,value)

获取：sessionStorage.getItem(key)

删除：sessionStorage.removeItem(key)

localStorage 存储复杂数据类型

问题：本地只能存储字符串,无法存储复杂数据类型.

解决：需要将复杂数据类型转换成 JSON 字符串,在存储到本地

语法：JSON.stringify(复杂数据类型)

JSON 字符串：

• 首先是 1 个字符串

• 属性名使用双引号引起来，不能单引号

• 属性值如果是字符串型也必须双引号

<body>

<script>

// 本地存储复杂数据类型

const goods = {

name: '小米',

price: 1999

}

// localStorage.setItem('goods', goods)

// console.log(localStorage.getItem('goods'))

// 1. 把对象转换为 JSON 字符串 JSON.stringify

localStorage.setItem('goods', JSON.stringify(goods))

// console.log(typeof localStorage.getItem('goods'))

</script>

</body>

问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用

解决： 把取出来的字符串转换为对象

语法：JSON.parse(JSON 字符串)<body> 

<script>

// 本地存储复杂数据类型

const goods = {

name: '小米',

price: 1999

}

// localStorage.setItem('goods', goods)

// console.log(localStorage.getItem('goods'))

// 1. 把对象转换为 JSON 字符串 JSON.stringify

localStorage.setItem('goods', JSON.stringify(goods))

// console.log(typeof localStorage.getItem('goods'))

// 2. 把 JSON 字符串转换为对象 JSON.parse

console.log(JSON.parse(localStorage.getItem('goods')))

</script>

</body

综合案例

数组 map 方法

使用场景：

map 可以遍历数组处理数据，并且返回新的数组

语法： 

<body>

<script>

const arr = ['red', 'blue', 'pink']

// 1. 数组 map 方法 处理数据并且 返回一个数组

const newArr = arr.map(function (ele, index) {

// console.log(ele) // 数组元素

// console.log(index) // 索引号

return ele + '颜色'

})

console.log(newArr)

</script></body>

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map 重点在于有返回值，forEach 没有返回值（undefined）

数组 join 方法

作用：join() 方法用于把数组中的所有元素转换一个字符串

语法： 

<body>

<script>

const arr = ['red', 'blue', 'pink']

// 1. 数组 map 方法 处理数据并且 返回一个数组

const newArr = arr.map(function (ele, index) {

// console.log(ele) // 数组元素

// console.log(index) // 索引号

return ele + '颜色'

})

console.log(newArr)

// 2. 数组 join 方法 把数组转换为字符串

// 小括号为空则逗号分割

console.log(newArr.join()) // red 颜色,blue 颜色,pink 颜色

// 小括号是空字符串，则元素之间没有分隔符

console.log(newArr.join('')) //red 颜色 blue 颜色 pink 颜色

console.log(newArr.join('|')) //red 颜色|blue 颜色|pink 颜色

</script>

</body

<<
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值