今天小编给大家分享一下JavaScript的BOM操作怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
window对象
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。
全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子。
我们在全局作用域中定义了一个变量name和一个函数sayName()，它们被自动归在了window对象名下。于是，可以通过window.name访问变量name，可以通过window.sayAge()访问函数sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最终显示的仍然是正确的结果。
常见事件
window对象也有一些自己的事件，这里我们用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script> window.addEventListener('load', function () { var btn = document.querySelector('button'); btn.addEventListener('click', function () { alert('点击我'); }); }); window.addEventListener('load', function () { alert(22); }); document.addEventListener('DOMContentLoaded', function () { alert(33); }); // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等 // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些 </script> </head> <body> <button>点击</button> </body></html>调节窗口大小
比如下面这个案例，当我们把网页缩放到800的时候盒子就会消失不见。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> window.addEventListener('load', function () { var div = document.querySelector('div'); window.addEventListener('resize', function () { console.log(window.innerWidth); console.log('变化了'); if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block'; } }); }); </script> <div></div> </body></html>定时器setTimeout
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <script> // 1. setTimeout // 语法规范： window.setTimeout(调用函数, 延时时间); // 1. 这个window在调用的时候可以省略 // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0 // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()' // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字) // setTimeout(function() { // console.log('时间到了'); // }, 2000); function callback() { console.log('执行力'); } var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); // setTimeout('callback()', 3000); // 我们不提倡这个写法 </script> </body></html>this指向问题
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <button>点击</button> <script> // this 指向问题 一般情况下this的最终指向的是那个调用它的对象 // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window） console.log(this); function fn() { console.log(this); } window.fn(); window.setTimeout(function () { console.log(this); }, 1000); // 2. 方法调用中谁调用this指向谁 var o = { sayHi: function () { console.log(this); // this指向的是 o 这个对象 }, }; o.sayHi(); var btn = document.querySelector('button'); // btn.onclick = function() { // console.log(this); // this指向的是btn这个按钮对象 // } btn.addEventListener('click', function () { console.log(this); // this指向的是btn这个按钮对象 }); // 3. 构造函数中this指向构造函数的实例 function Fun() { console.log(this); // this 指向的是fun 实例对象 } var fun = new Fun(); </script> </body></html>location对象
转跳页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <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.itcast.cn'; }) var timer = 5; setInterval(function() { if (timer == 0) { location.href = 'http://www.itcast.cn'; } else { div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页'; timer--; } }, 1000); </script></body></html>location常见方法
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function () { // 记录浏览历史，所以可以实现后退功能 // location.assign('http://www.itcast.cn'); // 不记录浏览历史，所以不可以实现后退功能 // location.replace('http://www.itcast.cn'); location.reload(true); }); </script> </body></html>以上就是“JavaScript的BOM操作怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
