JavaScriptBOM对象和浏览器事件对象

发布于：2023-01-22 ⋅ 阅读:(257) ⋅ 点赞:(0)

一、BOM对象

1、概念

BOM，全名：Browser Object Model， 是指浏览器对象模型

DOM是将HTML文档中的各个元素封装成一个对象（Document)，而BOM则是将一个浏览器的各个组成部分封装成对象(Browwser)供调用使用。

2、BOM的组成

  • window：浏览器窗口对象
  • navigator：浏览器对象
  • screen：浏览器所处客户端的显示器屏幕对象
  • history：浏览器当前窗口的访问历史记录对象
  • location：浏览器当前窗口的地址栏对象

3、window对象

window对象表示浏览器中打开的窗口

3.1 window对象方法

1、三个带弹出框的方法  

方法名 用法
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
prompt() 显示可提示用户输入的对话框

2、与打开和关闭有关的方法 

方法名 用法
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
close() 关闭浏览器窗口

案例：BOM对象的小案例

效果图：

<!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>
    <style>
        ul{list-style: none;}
        ul li{
            width: 200px;
            height: 30px;
            border: 1px solid red;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <input type="text" id="content" placeholder="请输入内容">
    <input type="button" id="add" value="添加节点">
    <input type="button" value="打开新窗口" id="openNew">
    <input type="button" value="关闭新窗口" id="closeNew">
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var add = document.getElementById('add')
        add.onclick=function(){
            // console.log(confirm('你确定要添加吗？'));
            if(test()){
                if(confirm('你确定要添加吗？')==true){
                    // 创建节点
                    var li = document.createElement('li')
                    // 获取文本框中输入的值
                    var content = document.getElementById('content')
                    // 将文本框的值给创建的节点
                    li.innerHTML = content.value
                    // 获取ul标签
                    var ul = document.querySelector('.list')
                    // 将li添加到ul标签中
                    ul.appendChild(li)
                    alert('添加成功')
                }else{
                    alert('不添加该节点')
                }
            }else{
                alert('格式不正确！！！')
            }    
        }
        var newWindow;// 用来存储新打开的窗口
        openNew.onclick=function(){
            // open()可以打开新的窗口，返回给window
            newWindow = window.open('https://www.baidu.com')
        }
        closeNew.onclick=function(){
            // close()关闭打开的窗口
            newWindow.close()
        }
        // 用来验证文本框输入的值的格式：只包含数字与字母并且不能为空
        function test(){
            // 正则表达式：只能是数字和字母，并且不能为空
            var reg = /\b[a-zA-Z0-9]{1,}\b/
            // 获取文本框中输入的值
            var content = document.getElementById('content')
            // test()返回一个布尔值:当满足正则表达式时，返回true,反之则返回false
            console.log(reg.test(content.value));
            if(reg.test(content.value)){
                return true
            }else{
                return false
            }
        }
    </script>
</body>
</html>

3、 与定时器有关的方法

方法名 用法
setTimeout() 在指定的毫秒数后调用函数或计算表达式（一次）。
clearTimeout() 取消由setTimeout()方法设置的时间。
setlnterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式（多次）。

setTimeout()：指定时间后执行1次（只执行一次）

案例：使用定时器完成一个简易的轮播图

效果图：

<!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>轮播图</title>
    <style>
        #list{
            width: 500px;
            height: 300px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        #list img{
            width: 500px;
            height: 300px;
        }
        ul{
            list-style: none;
            display: flex;
            justify-content: space-between;
            width: 400px;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        ul li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.402);
        }
        .active{
            background-color: rgba(0, 0, 0, 0.315);
        }
    </style>
</head>
<body>
    <div id="list">
        <img src="img/bg1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var index = 1;
        function changePic(){
            var list = document.getElementById('list');
            var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg']
            // 如何更换图片
            // 获取到图片img
            var img = document.querySelector('#list img')
            // 更改img的src来实现图片的切换
            img.src='img/'+arr[index]
            // console.log(index);

            // 获取所有的li标签
            var list = document.querySelectorAll('ul li')
            // 将所有的li上面的active进行清楚
            for(var i=0;i<list.length;i++){
                list[i].classList.remove('active')
            }
            list[index].classList.add('active')
            index++
            if(index>5){
                index=0
            }
        }

        // 每个一秒切换一张图片，要用到定时器
        var setImg = setInterval(changePic,1000)
        list.addEventListener('mouseout', (event) => {
            setImg = setInterval(changePic, 1000);
            event.stopPropagation()
        })
        list.addEventListener('mouseover', () => {
            clearInterval(setImg)
        })
    </script>
</body>
</html>

 3.2 window对象的属性

属性名 描述 通过window对象获取方法
history 对History对象的只读引用 window.history
location 对Location对象的只读引用 window.location
navigator 对Navigator对象的只读引用 window.navigator
screen 对Screen对象的只读引用 window.screen

4、Location对象

方法名 方法描述
assign() 加载新的文档
reload() 重新加载当前文档
replace() 用新文档替换当前文档

效果图：

<input type="button" value="assign" id="assign">
<input type="button" value="reload" id="reload">
<input type="button" value="replace" id="replace">
<input type="button" value="href" id="href">
<script>
    assign.onclick=function(){
        // assign():可以打开新的页面，并且可以返回，可以产生历史记录的
        location.assign('https://www.baidu.com')
    }
    reload.onclick=function(){
        // reload():实现页面刷新
        console.log('aa');
        location.reload()
    }
    replace.onclick=function(){
        // replace():用新文档替换当前文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
        location.replace('https://www.baidu.com')
    }
    href.onclick=function(){
        location.href='https://www.baidu.com'
        // console.log(location.host);
        // console.log(location.hostname);
    }
</script>

5、History对象

方法 描述
back() 加载当前窗口history列表中的前一个URL
forward() 加载当前窗口history列表中的下一个URL
go() 加载当前窗口history列表中的某个具体页面
  • back() 方法相当于后退按钮
  • forward() 方法相当于前进按钮
  • go(1) 代表前进1页，等价于forward() 方法
  • go(-1) 代表后退1页，等价于back() 方法

效果图：

 第一个页面：

<body>
    1.html
    <input type="button" value="跳转到2.html" id="btn">
    <script>
        btn.onclick=function(){
            location.href='05-history2.html'
        }
    </script>
</body>

第二个页面：

<body>
    2.html
    <input type="button" value="后退" id="btn">
    <input type="button" value="跳转到3.html" id="btn2">
    <input type="button" value="forward" id="btn3">
    <input type="button" value="go" id="btn4">
    <script>
        btn.onclick=function(){
            history.back()//后退到历史记录列表的上一个url
        }
        btn2.onclick=function(){
            location.href='05-history3.html'
        }
        btn3.onclick=function(){
            history.forward()//前进到历史记录列表的下一个url
        }
        btn4.onclick=function(){
            history.go(1)
        }
    </script>
</body>

第三个页面：

<body>
    3.html
    <input type="button" value="后退" id="btn">
    <input type="button" value="跳转到1.html" id="btn2">
    <script>
        btn.onclick=function(){
            history.back()//后退
        }
        btn2.onclick=function(){
            history.go(-2)
        }
    </script>
</body>

二、浏览器事件对象

事件 说明
onload() 对象装载完成后触发
onscroll() 窗口的滚动条被拖动时触发
onresize() 窗口的大小改变时触发

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布