BOM、window解读

胡小葵

已于 2022-08-25 19:43:54 修改

阅读量516

点赞数

文章标签： javascript 前端开发语言

于 2022-08-25 19:33:04 首次发布

本文链接：https://blog.csdn.net/m0_48860371/article/details/126524295

版权

BOM

javascript三部分组成

ECMASCRIPT JavaScript语法
BOM 浏览器对象模型 Browser Object Model
DOM 文档对象模型

BOM作用

其实就是操作浏览器的一些能力
我们可以操作哪些内容:

获取一些浏览器的相关信息（窗口的大小）
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息（浏览器的版本）
让浏览器出现一个弹出框（alert/confirm/prompt）
BOM 的核心就是 window 对象
系统创建window对象
window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

window对象就是用来操作“浏览器窗口”的一个对象。
在这里插入图片描述

window对象包含了核心对象，属性

子对象

history 子对象-> 历史记录对象
location 子对象 -> 地址栏对象 (位置对象)
document 子对象 -> 文档对象 html文档重点学习
navigator，包含浏览器相关信息
screen 用户显示屏幕相关属性

常用方法

其中的window可以省略

alert() 信息提示框
confirm（）信息确认框

function test1(){
            var isOk = confirm('确定要删除改记录吗?')
            if(isOk){
                alert('删除成功')
            }else{
                alert('取消删除')
            }
        }
        test1()

在这里插入图片描述

prompt（）信息输入框

 function test2(){
          var score = prompt('请输入你的数学成绩!')//score是字符串类型
            var newScore = Number(score)+ 10  //减可以隐式类型转换
            alert(newScore)
        }
       test2()

在这里插入图片描述

open() 打开指定地址的浏览器窗口
- window.open(URL,窗口名称，参数)；
close() 关闭指定地址的浏览器窗口
定时器
- 倒计时定时器
  - setTimeout()和clearTimeout() 设置和清除定时器

  function test4(){
            var timer = setTimeout(function(){
                console.log('今天天气降温了!');
            },2000)
        }
       test4()
       clearTimeout(timer)

循环定时器
- -setInterval（）和 clearInterval()；设置和清除定时器，定时器无限循环

 function test5(){
            var n = 5
            var timer = setInterval(function(){
                if(n == 0){
                     clearInterval(timer) //结束定时器
                 }
                 console.log(n--)
            },1000) 
        }

        test5()

历史记录history对象

创建对象: window.history
方法
- back() 后退加载对象列表中的前一个URL
- forward() 前进加载对象列表中的下一个URL
- go(-1) 后退 go(1) 前进 go(0) 刷新界面加载对象列表中的某具体URL

function nextHistoryPage(){
    window.history.forward();
}

function preHistoryPage(){
    window.history.back();
}
 
<a href="javascript:nextHistoryPage();">下一页</a>
<a href="javascript:preHistoryPage()">上一页</a>

在这里插入图片描述

位置对象(location)

获得当前页面的URL地址： location.href
```
 console.log(  location.href );
```
重新加载当前文档：location.reload(); 刷新
location的其他属性

获取浏览器窗口尺寸

innerHeight
innnerWidth

 <button onclick="getSize()">获取尺寸</button>

    <script>
        function getSize(){
            var h = window.innerHeight // 高
            var w = window.innerWidth  // 宽
            document.write( `height: ${h},  width: ${w}` )
        }
    </script>

滚动事件属性

即当浏览器的滚动条滚动时触发
鼠标滚动时触发
注：页面高度超过浏览器可视窗口触发

 window.onscroll = function(){
  console.log('滚动条懂了 ');
  }

浏览器滚动距离

在这里插入图片描述

scrollTop 获取的是页面向上滚动的距离
两种获取方式：
scrollLeft 获取页面向左滚动的距离，与上一样

该属性有兼容问题！！！下面解决兼容问题

 <style>
        div{
            height: 1200px;
        }
    </style>
<h2>滚动事件属性</h2>
    <button onclick="setTop(200)">设置100位置</button>
    <div></div>
    <script>
        // 浏览器滚动条滚动时执行函数代码
        window.onscroll = function(){
            // console.log('scrollTop :', document.documentElement.scrollTop )
            // console.log('body ',document.body.scrollTop);

            var scrollTop = getScollTop()
            console.log(scrollTop)
        }

        function getScollTop(){
            // 逻辑或， 前面有值(true) 直接返回，否则返回后面的值
            return document.documentElement.scrollTop || document.body.scrollTop
        }

        function setTop(top){
            document.documentElement.scrollTop = top
        }
    </script>

回到顶部的练习

<title>回到顶部</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			div {
				background-color: skyblue;
				height: 1200px;
			}
			div img {
				max-width: 100%;
			}
			button {
				position: fixed;
				bottom: 20px;
				right: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="./image/jingdong.jpg" alt="" />
		</div>
		<button onclick="backTop()">回到顶部</button>

		<script>
			function backTop() {
				var timer = setInterval(function () {
					var height = document.documentElement.scrollTop 
					document.documentElement.scrollTop = height - 150 
                    if(height <= 0){
                        clearInterval(timer) // 结束定时器
                    }
				}, 100)

			}
		</script>
	</body>