jsの再体验 - - BOM（Web APIs 浏览器对象模型）

最新推荐文章于 2024-05-01 09:00:00 发布

是草莓味的啊

最新推荐文章于 2024-05-01 09:00:00 发布

阅读量182

点赞数

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_43908649/article/details/122324348

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

jsのBOM浏览器对象模型

一、认识BOM

BOM（Brower Object Model）：浏览器对象模型，独立于页面内容，与浏览器进行交互对象，核心对象是window
JS语法标准是ECMA，DOM标准是W3C，BOM缺乏标准（兼容性比较差）

1.1.对比DOM和BOM

BOM包含了DOM
window（顶级对象）下面包含了：document，location，navigation，screen，history等对象
window.document.querySelector()

DOM	BOM
文档对象模型（把文档当做一个对象）	浏览器对象模型（把浏览器当做一个对象来看）
顶级对象是document	顶级对象是window
主要学习操作页面元素	主要学习浏览器窗口交互
W3C标准规范	没有标准，兼容性差，浏览器厂商在各自浏览器上定义

二、window - - 浏览器顶级对象

2.1.认识window

双重角色

1.是JS访问浏览器窗口的接口
2.是全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法（调用时可以省略window）
alert，prompt都属于window
注意：window.name已经有定义，打印出的是一个空字符串，所以定义属性名时最好不要用name

<script>
    var num=10
    function fn(){
        console.log(num)           
        console.log(window.num)    
    }
    fn()
    window.fn()
</script>

2.2.onload - - 页面加载事件

为什么要使用window页面加载事件

因为代码是从上往下执行，必须先有buttom这个dom元素，才能在js中调用这个元素，如果想将script写到页面的其他地方，就需要使用window.onload将页面加载完毕后再使用js调用button元素，文档内容完全加载完(包括图像，脚本文件，css文件等)后会触发onload事件

window.onload
window.addEventListener('load',function(){})
文档完全加载完毕才可以触发，可以重复注册
document.addEventListener('DOMContentLoaded',function(){})
加载速度比load更快，DOM加载完毕后就会触发(不包括图像，脚本文件，css文件,flash等)
如果遇到页面图片很多时可以使用该加载方式，可以提高用户体验感
有兼容性问题，IE9 以上才支持

<script>
    // 传统的窗口加载事件，不能重复注册,如果注册多次，出现冲突，以最后一次为准
    // window.onload = function(){
    //     var button = document.querySelector('button')
    //     button.addEventListener('click',function(e){
    //         alert('点击按钮')
    //     })
    // }
    // window.onload = function(){
    //     alert(22)
    // }

    // 先弹出11（因为只需要加载完DOM就可以触发事件），再弹出22，再弹出33，点击按钮后再弹出44

    // 新窗口加载事件1 window.addEventListener('load')
    // 文档完全加载完毕才可以触发，可以重复注册
    window.addEventListener('load',function(e){
        alert('22')
        var button = document.querySelector('button')
        button.addEventListener('click',function(e){
            alert('44')
        })
    })
    window.addEventListener('load',function(e){
        alert('33')
    })

    // 新窗口加载事件2 document.addEventListener('DOMContentLoaded')
    // 加载速度比load更快，DOM加载完毕后就会触发(不包括图像，脚本文件，css文件,flash等)，如果遇到页面图片很多的时候可以使用该加载方式，可以调高用户体验感
    // 有兼容性问题，IE9 以上才支持
    document.addEventListener('DOMContentLoaded',function(){
        alert('11')
    })
</script>
<button>点击</button>

2.3.onresize - - 窗口调整大小事件

浏览器窗口大小发生变化是会被触发，可以用于响应式布局布局的调整
window.addEventListener('resize',function(){})
window.innerWidth 获取屏幕的宽度
window.innerWidth 获取屏幕的高度

<script>
    window.addEventListener('load',function(){
        // window.innerWidth 获取屏幕的宽度和高度
        // console.log(window.innerWidth)
        // console.log(window.innerHeight)

        var div=document.querySelector('div')
        // 页面加载完毕后就需要判断当前页面的宽度为多少，当屏幕宽度小于800时隐藏div
        if(window.innerWidth < 800){
            div.style.display = 'none'
        }else{
            div.style.display = 'block'
        }
        // 每次页面大小发送调整是也要进行判断
        window.addEventListener('resize',function(){
            if(window.innerWidth < 800){
                div.style.display = 'none'
            }else{
                div.style.display = 'block'
            }
        })
    })
</script>
<div style="background-color: tomato;width: 200px;height: 200px;"></div>

2.4.setTimeOut | clearTimeout - - 定时器的设置与清除

设置定时器：var timerID = window.setTimeout(回调函数,延时毫秒数)
setTimeout(callback,3000)
window可省略，回调函数名不加小括号，毫秒数也可以省略(默认为0)
清除定时器：window.clearTimeout(timerID)

<script>
    window.addEventListener('load',function(){

        // window.setTimeout(回调函数,延时毫秒数)
        
        // window可以省略:setTimeout(function(){},延时毫秒数)
        // 毫秒数也可以省略(默认为0):setTimeout(function(){})
        setTimeout(function(){
            alert('时间到了')
        },2000)

        
        function callback(){
            alert('爆炸了')
        }
        // 调用函数名时不需要加小括号
        setTimeout(callback,3000)
        // 如果加小括号还需要加上双引号(不推荐使用)
        setTimeout('callback()',3000)

        // 需要给定时器添加标识符(名字):由于页面中可能有很多定时器
        var timer1 = setTimeout(callback,3000)
        var timer2 = setTimeout(callback,5000)
    })
</script>

2.4.1.小案例 - - 五秒隐藏广告，5s内鼠标移动到广告上，则不关闭

<script>
    window.addEventListener('load',function(){
        var img = document.querySelector('img')
        // 设置定时器
        var timer = setTimeout(closeadvertisement,5000)
        // 关闭广告(就是将图片隐藏)
        function closeadvertisement(){
            img.style.display = 'none'
        }
        // 若5s内(广告还在时)将鼠标移动到广告上，就不关闭广告(删除定时器即可)
        img.addEventListener('mouseover',function(){
            clearTimeout(timer)
        })
    })
</script>
<img src="./img/3.jpg">

2.5.setInterval | clearInterval - - 定时器的设置与清除

设置定时器：var timerID = window.setInterval(回调函数,延时毫秒数)
setInterval(callback,3000)
window可省略，回调函数名不加小括号，毫秒数也可以省略(默认为0)
清除定时器：window.clearInterval(timerID)

秒杀倒计时小案例
开启关闭定时器案例
点击按钮5s后可以重新发送信息（防止多次发送信息）

<script>
    var begin = document.querySelector('.begin')
    var end = document.querySelector('.end')
    var timer = null   // 设置为全局变量
    begin.addEventListener('click',function(){
        timer = setInterval(function(){
            console.log('开启定时器')
        },1000)
    })
    end.addEventListener('click',function(){
        clearInterval(timer)
        console.log('关闭定时器')
    })
</script>

<input type="text"></input>
<button>发送</button>
<script>
    // 点击发送短信按钮后设置一个5秒的定时器后才可以再次点击
    var button = document.querySelector('button')
    var timer = null
    var resttime = 5
    button.addEventListener('click',function(){
        button.disabled = true
        // 在设置定时器前先执行一次
        button.innerHTML = '还剩下'+resttime+'s可以重写发送信息'
        resttime --
        timer = setInterval(function(){
            if(resttime == 0){
                // 如果剩余时间为0清除定时器，按钮解除禁用，把按钮文字改为发送，并将剩余时间重新设置为5s
                clearInterval(timer)
                button.disabled = false
                button.innerHTML = '发送'
                resttime = 5
            }else{
                button.innerHTML = '还剩下'+resttime+'s可以重写发送信息'
                resttime --
            }
        },1000)  
    })
</script>

2.6.setTimeout与setInterval的区别

setTimeout：只调用一次回调函数
setInterval：重复调用多次回调函数，每隔一段时间（ms）调用一次

三、BOM的常见对象

3.1.location对象

是window给我们提供的一个属性，因为这个属性返回的是一个对象，使用这个属性也成为location对象
用于获取或设置窗体的url，解析url

3.1.1URL统一资源定位符

统一资源定位符（Uniform Resource Locator ，URL）

互联网标准资源地址，互联网上每个文件都有一个唯一的 url
包含的信息：文件的位置 和 浏览器应该怎样处理
语法格式：protocol://host[:port]/path/[?query]#fragment
http://www.wenmiao.cn/index.html?name=kangkang&age-18#link

组成	说明
protocol	通信协议，常用的有http，ftp，maito
host	主机（域名），www.wenmiao.cn
port	端口号（可选），省略时用默认端口（http默认端口为90）
path	路径，由0个或多个’/'符号分隔开的字符串，表示主机上的一个目录或文件地址
query	参数，以键值对的形式，多个参数通过&符号分隔
fragment	片段 #后面内容常见于链接，锚点

3.1.2.loaction的常见属性

属性	返回值
loaction.href	获取或设置整个url
loaction.host	获取主机（域名）
loaction.port	获取端口号（未写返回空字符串）
loaction.pathname	获取路径
loaction.search	获取参数
loaction.hash	获取片段 #后面内容常见于链接，锚点

<button>点击</button>
<div></div>
<script>
    var btn = document.querySelector('button')
    var div = document.querySelector('div')
    var resttime = 5
    btn.addEventListener('click',function(){
        // 点击按钮跳转到百度页面
        location.href = 'http://www.baidu.com'
    })
    setInterval(function(){
        if(resttime == 0){
            // 如果不点击按钮的话，5s后自动跳转到百度页面
            location.href = 'http://www.baidu.com'
        }else{
            div.innerHTML = '您将在'+resttime+'秒中后跳转到百度页面'
            resttime --
        }
    },1000)
</script>

3.1.3.loaction对象的方法

方法	返回值
loaction.assign()	重定向页面（跟href一样，可以跳转页面），记录历史，能后退页面
loaction.replace()	替换当前页，不记录历史，所以不能后退页面
loaction.reload()	重新加载页面，相当于刷新按钮(f5)，如果参数为true强制刷新(ctrl+f5)

<button>点击</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        location.assign('http://www.baidu.com')   // 会记录历史(可返回)
        location.replace('http://www.baidu.com')  // 不会记录历史(不可返回)
        location.reload()                         // 刷新页面
        location.reload(true)                     // 强制刷新，从对应的网站上重新下载数据,是会产生流量的,用在一些及时更新快的网站、游戏
    })
</script>

3.2.navigator对象

3.2.1.loaction的常见属性

属性	返回值
userAgent	返回客户端发送给服务器的user-agent头部的值（可以获得使用的是哪个浏览器）

js判断用户用什么终端打开的页面并实现跳转

3.3.history对象

3.3.1.history的常见方法

方法	返回值
back()	后退功能
forward()	前进功能
go(n)	前进后退功能，n 为 2 是前进2页，n 为 -1 是后退1页

// index47.html
<a href="index48.html">点击前往下一个页面</a>
<button>前进</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        history.forward()
        // history.go(1)
    })
</script>
// index48.html
<button>后退</button>
<script>
    var btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        history.back()
        // history.go(-1)
    })
</script>