关于BOM_js等待页面bom元素-CSDN博客

本文链接：https://blog.csdn.net/shiliye_csdn/article/details/117841285

■ 关于BOM

BOM(browser object model)，即浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windows
BOM由一系列相关对象构成，并且每个对象都提供了很多方法和属性
BOM缺乏标准，JS的标准化组织是ECMA，DOM是W3C，BOM最初是netscape的一部分

□ BOM的构成

BOM包含了DOM，比DOM更大
BOM的核心对象windows包含以下对象
▶ document
▶ location
▶ navigation
▶ screen
▶ history

■ 关于windows对象

windows对象是浏览器的顶级对象，它具有双重角色
▶ 它是JS访问浏览器窗口的一个接口
▶ 它是一个全局对象，定义在全局作用域中的变量，函数都会变成windows对象的属性和方法

注：
在调用的时候，可以省略window，alert(),prompt()都是windows对象
window对象有一个特殊的属性为name，window.name, 因此变量的命名最好不要用name

□ windows对象的常见事件

◆ 窗口加载事件

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

window.onload = function(){}

或者

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

例1：
点击按钮后，不会触发监听器，因为代码都是从上到下执行的，button标签在JS方法下面，因此不会找到button

<html>
	<body>
		<script>
			var btn = document.querySelector('button');  
			btn.addEventListener('click',function(){
				alert('点击了我');  
			})
		</script>
		<button>点击</button>
	</body>
</html>

例2：
当点击按钮后，会触发监听器，当整个页面加载完事之后，再执行{}内部的方法，因此该部分代码放在页面的任何地方都会找到button
第二个监听方法会覆盖第一个监听方法，点击按钮会弹出"点击我2"

<html>
	<body>
		<script>
			window.onload = function(){ 
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('点击我1');
				})
			}

			window.onload = function(){ //以该onload为准
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('点击我2');
				})
			}
		</script>
		<button>点击</button>  
	</body>
</html>

注：
有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面元素全部加载完毕，再去执行处理函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
如果使用addEventListener,则没有限制

DOMContentLoaded事件
语法：

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
如果页面的图片很多，从用户访问到onload触发可能需要较长时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适
例：

<html>
	<body>
		<script>
			window.onload = function(){ 
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('点击我1');
				})
			}

			window.onload = function(){ //以该onload为准
				var btn = document.querySelector('button');
				btn.addEventListener('click',function(){
					alert('点击我2');
				})
			}
			
			document.addEventListener('DOMContentLoaded',function(){
				alert(333);
			})
		</script>
		<button>点击</button>   //先弹出333，再弹出点击我2
	</body>
</html>

◆ 调整窗口大小事件

通过window.onresize调整窗口大小加载事件

语法：

window.onresize = function(){}

或者

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

注：
只要窗口大小发生像素变化，就会触发这个事件
经常利用该事件完成响应式布局，window.innerWidth 当前屏幕的宽度

例：

<html>
	<body>
		<script>
			window.onload = function(){ 
				var div = document.querySelector('div');
				window.addEventListener('resize',function(){
					var width = window.innerWidth;
					if(width <= 800){
						div.style.display = null;
					} else {
						div.style.display = block;
					}
				})
			}
		</script>
		<div></div>
	</body>
</html>

■ 定时器

window对象提供了以下两个定时器方法
▶ setTimeout()
▶ setInterval()

□ setTimeout()

通过**setTimeout()**方法，设定一个定时器，该定时器在定时器到期后执行调用函数

语法：

window.setTimeout(调用函数[，延迟的毫秒数]);

例：

<html>
	<body>
		<script>
			window.setTimeout(function(){  //window在调用时，可以省略，可以直接写setTimeout
				console.log('2秒时间到了');
			}, 2000); //时间单位是毫秒，如果胜省略，则默认是0，即立即执行
			

			//还可以通过有名函数方式调用
			window.setTimeout(callBack, 3000); //时间单位是毫秒，如果胜省略，则默认是0，即立即执行
			function callBack(){
				console.log('3秒时间到了');
			}
			
			window.setTimeout('callBack()', 4000);  //函数可以通过字符串形式调用，但是不提倡
			
			//页面中可能有很多定时器，通常给定时器加标识符，用于区别不同的定时器
			var timer1 = setTimeout(callBack, 3000);
			var timer2 = setTimeout(callBack, 3000);
		</script>

	</body>
</html>

◆ 回调函数

setTimeout()方法中的函数称为回调函数 callBack
普通函数是按照代码顺序直接调用
回调函数需要等待时间，时间到了采取执行，因此称为回调函数
简单理解，回调就是回头调用的意思，上一件事干完，再回头调用这个函数

以下都是回调函数

element.onclick = function(){}
element.addEventListener('click',fn)

◆ clearTimeout

通过clearTimeout，来停止setTimeout定时器

语法：

window.clearTimeout(timeID)

例：

<html>
	<body>
		<button>点击停止定时器</button>
		<script>
			

			var timer = setTimeout(function(){
				alert('定时器启动');
			},5000)
		
			var btn = document.querySelector('button');
			
			btn.addEventListener('click',function(){
				clearTimeout(timer);
			})
		</script>

	</body>
</html>

□ setInterval()

通过**setInterval()**方法，重复调用一个函数，每隔这个时间，就去调用一次回调函数
使用方法同setTimeout，但setTimeout是只调用一次，而setInterval调用多次

语法：

window.setInterval(调用函数[，延迟的毫秒数]);

◆ clearInterval()

取消了先前通过调用setInterval建立的定时器

<html>
	<body>
		<button class='beginTimer'>开始定时器</button>
		<button class='stopTimer'>停止定时器</button>
		<script>
			var btn1 = document.querySelector('.beginTimer');
			var btn2 = document.querySelector('.stopTimer');
			console.log(btn1);
			var timer = null;
			btn1.addEventListener('click',function(){
				timer = setInterval(function(){
					console.log('定时器已开启');
				},1000);
			})
	
			btn2.addEventListener('click',function(){
				clearInterval(timer);
			})
		</script>
	</body>
</html>

■ this指向问题制

this的指向在函数定义时是确定不了的，只有函数执行的时候才能确定
一般情况，this的最终指向是那个调用该函数的对象

在全局作用域或普通函数中，this指向全局对象window(注意定时器里面的this指向window)

例1：

console.log(this); //输出：window

例2：

function fn(){
	console.log(this);
}
fn();  //输出：window，实际相当于window.fn();

例3：

setTimeout(function(){
	console.log(this);  //输出：window
},1000)

例4：
this指向方法的调用者

var o = {
	sayHi:function(){
		console.log(this);  
	}
}
o.sayHi(); //输出：window

例5：

<html>
	<body>
		<button>点击</button>
		var btn = document.querySelector('button');
		
		btn.onclick = function(){
			console.log(this); //输出：<button>点击</button>
		}

		btn.addEventListener('click',function(){
			console.log(this); //输出：<button>点击</button>
		})
		
		//构造函数中this指向构造函数的实例
		function Fun(){
			console.log(this);
		}
		var fun = new Fun(); //this 指向的是实例对象fun
	</body>
</html>

■ JS执行机制

□ JS执行队列

JS语言的特点是单线程，也就是说，同一个时间只能做一件事
这是由于JS诞生的使命所致，JS是为处理页面中的交互，以及操作DOM而诞生的
比如对某个DOM元素进行添加和删除操作，只能先进行添加，再进行删除

单线程意味着所有的任务都需要排队，前一个任务结束，才会执行下一个任务
这样就导致，如果JS执行时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

为解决这个问题，利用CPU多核计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，于是JS出现了同步和异步

□ 同步和异步

同步
前一个任务结束后再执行后一个任务，程序的执行顺序和任务排列的顺序是一致的，同步的

异步
在做一件事时，因为这件事会花很长时间，在做这件事的同时，你还可以去处理其他事

同步任务
同步任务都在主线程上执行，形成一个执行栈

异步任务
JS的异步是通过回调函数实现的
一般而言，异步任务有以下三种类型
▶ 普通事件，如click，resize等
▶ 资源加载,如load，error等
▶ 定时器，包括setInterval,setTimeout等
异步任务相关回调函数添加到任务队列当中(任务队列也称为消息队列)

□ JS执行机制

1 先执行执行栈中的同步任务
2 异步任务(回调函数)放入任务队列中
3 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

□ 事件循环

由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环(event loop)

■ location对象

window对象提供了一个local属性，用于获取或设置窗体的URL，并且可以用于解析URL
因为这个属性返回的是一个对象，所以该属性也称为location对象

□ location对象的属性

location.href
获取或设置整个URL

location.host
返回主机名或域名

location.port
返回端口号，如果未写，则返回空字符串

location.pathname
返回路径

location.search
返回参数

location.hash
返回片段，常见于链接或锚点

例：

<html>
	<body>
		<button>点击现在跳转</button>
		<div></div>
		<script>
			var btn = document.querySelector('button');
			var div = document.querySelector('div');

			btn.addEventListener('click',function(){
				location.href = 'http:\\www.baidu.com';
			})
			
			var timer = 5;
			setInterval(function(){
				if(timer == 0){
					location.href = 'http:\\www.baidu.com';
				} else {
					div.innerHTML = '您将在' + timer + '秒内跳转到新页面';
					timer--;
				}
			},1000)
		</script>
	</body>
</html>

□ location对象的方法

location.assign()
跟href一样，可以跳转页面，也称为重定向页面

location.replace()
替换当前页面，因为不记录历史，所以不能后退

location.reload()
重新加载页面，相当与刷新按钮，或者f5，如果参数为true，强制刷新ctrl + F5

例：

<html>
	<body>
		<button>点击现在跳转</button>
		<div></div>
		<script>
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			

			btn.addEventListener('click',function(){
				location.href = 'http:\\www.baidu.com';
			})
			
			var timer = 5;
			setInterval(function(){
				
				if(timer == 0){
					location.href = 'http:\\www.baidu.com';
				} else {
					div.innerHTML = '您将在' + timer + '秒内跳转到新页面';
					timer--;
				}
				
			},1000)
		</script>
	</body>

</html>