BOM部分总结【详细】

但行好事wlw

已于 2022-04-12 17:37:27 修改

阅读量883

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端

于 2021-12-24 11:41:11 首次发布

本文链接：https://blog.csdn.net/egg_er/article/details/122121546

版权

JavaScript 专栏收录该内容

36 篇文章 10 订阅

订阅专栏

BOM

BOM是浏览器对象模型，也是网页开发中最大的对象，它的核心对象时window

BOM常见的事件对象（onlode,resize,setTimeout定时器）

1.onlode事件对象如何使用？
我们知道js代码摆放的位置是不固定的，但是大多为外链式，并且js代码如果摆放在页面元素加载前面就会报错，由于获取不到相应的元素对象，如下代码：

实现点击123所在的盒子，弹出aa的效果，此时的结果显然是实现不了的，因为按照js的执行机制是从上往下依次执行，因此js代码中是获取不到该元素的。因此报错：TypeError: Cannot read properties of null (reading 'addEventListener')

	// 此时输出结果为报错
	<script>
        var d = document.querySelector('div');
        d.addEventListener('click', function() {
            alert('aa');
        });
    </script>
    
    <body>
   		 <div>123</div>
	</body>

那么此时有两种解决方案：

把js代码放在结构代码的下方eg：（此时能够实现）

 	// 此时能够实现  弹出aa
 	<div>123</div>
    <script>
        var d = document.querySelector('div');
        d.addEventListener('click', function() {
            alert('aa');
        });
    </script>

利用上面所说的，给js一个页面加载事件（此时也能够实现）

	//此时也能够实现
	<div>123</div>
    <script>
        window.onload = function() {
            var d = document.querySelector('div');
            d.addEventListener('click', function() {
                alert('aa');
            });
        }
    </script>

与onload加载事件相似的还有： DOMContentLoaded
DOMContentLoaded的优点： 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。
使用方法：

	// 此时也可以实现
 	<div>123</div>
    <script>
  		// 注意这个对象时document 不是 window
        document.addEventListener('DOMContentLoaded', function() {
            var d = document.querySelector('div');
            d.addEventListener('click', function() {
                alert('aa');
            });
        })
    </script>

resize（窗口大小调整加载事件）
使用场景：
2.1. 只要窗口大小发生像素变化，就会触发这个事件。
2.2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度（重点）
tips: 与媒体查询结合记忆。

	<style>
		div{
			width:100px;
			height:100px;
			background-color:pink;
		}
	</style>
	<script>
        // 注册页面加载事件
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
        	// 注册调整窗口大小事件
            window.addEventListener('resize', function() {
                // window.innerWidth 获取窗口大小
                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>

定时器方法：（两种：setTimeout().setInterval()）
setTimeout()与setInterval()区别：
3.1. setTimeout()只执行一次，setInterval()重复执行。
3.2 使用场景方法： 这里讲一下参数，拿setTimeout()来说，有两个参数，setTimeout(回调函数，时间)，意思为在某个时间的时候执行回调函数中的代码。当然setInterval(回调函数，时间)也是一样的。

tips: 定时器第二个参数时间的单位是毫秒

	<script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');
         }, 2000);             // 两秒后控制台显示时间到了
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);         // 三秒后控制台显示爆炸了
        var timer2 = setTimeout(callback, 5000); 		 // 五秒后控制台显示爆炸了
    </script>

BOM都包含什么（dom,location,navigation,screen,history）

在这里插入图片描述
那么聊聊他们各自都是做什么的，以及使用方法：

DOM部分： 这个在前文中我们已经提到了。详情了解DOM 详细一篇就够【重点】以及DOM 节点操作【微重点】【案例】
location部分： 主要用于跳转链接网址
2.1. 先说说网址的构成：上图中最上面是网址所对应的名称，提供参考。(这里解释一个点儿 ?query代表的是传递的参数，重点记忆)

以下是location的属性，右边一行式属性对应的值。我们常用的就是（search,href）

对于location.href的用法：我们主要用于跳转页面，用法很简单，我们只需要修改location.href的值为其他的域名即可，比如https://www.baidu.com.写一个案例：如下：(倒计时跳转案例)

	<button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.baidu.com';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>

对于location.search 获取到的值就是网页传递的参数，也就是?query，而?query对应的是键值对，我举个栗子，?name = ‘leilei’; 获取到leilei这个数据；

操作步骤为：

先在一个网页form表单中提交信息到到另外一个网页，此时假设提交到了test.html中，在另外一个网页中就有了这个网页传递的数据显示在网址中，那么此时就可以通过location.search获取到这个参数。接下来在test.html中编写js代码。
利用获取字符串substr(1)去掉参数中的?号
再利用split(‘=’)，通过等号分割成两个数组，这样就可以通过索引值为1获取到我们想要的leilei

	// 第一个网页中代码：
	<body>
    	<form action="test.html">
        	<input type="text" name="uname" id="">
        	<input type="submit" value="提交">
    	</form>
	</body>
	
	
	// test.html网页中的代码：
	<div></div>
    <script>
        var getquertstr = location.search;   // 获取？query     也就是：？uname=leilei
        var getquery = location.search.substr(1);  // 去掉?   此时的值为uname = leilei
        var arr = getquery.split('=');   // 把数据通过=号分割成数组，arr[uname,leilei];
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎您';        // 此时的arr[1],就是leilei
    </script>

实现情况为：（跳转页面，并且把第一个页面的数据在第二个页面也即是test.html中获取并显示了）
在这里插入图片描述

在这里插入图片描述
3. navigator对象部分：
navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象部分：
这个其实就是平常在浏览器中见到的以下按钮功能（主要实现前进与后退到某个网页）
在这里插入图片描述
history有三个方法

forword(),是前进到某个网页
back();返回到前面访问过的网页
go() 这个重点记忆，因为非常方便，go(1)代表forword()的功能,go(-)代表back()的功能。

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~
在这里插入图片描述

但行好事wlw

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
BOM部分总结【详细】

BOMBOM是浏览器对象模型，也是网页开发中最大的对象，它的核心对象时windowBOM常见的事件对象（onlode,resize,setTimeout定时器）1.onlode事件对象如何使用？我们知道js代码摆放的位置是不固定的，但是大多为外链式，并且js代码如果摆放在页面元素加载前面就会报错，由于获取不到相应的元素对象，如下代码：实现点击123所在的盒子，弹出aa的效果，此时的结果显然是实现不了的，因为按照js的执行机制是从上往下依次执行，因此js代码中是获取不到该元素的。因此报错：TypeE
复制链接

扫一扫