JavaScript BOM

1. window对象

window对象是JavaScript中最顶层的对象，它代表浏览器窗口。几乎所有的浏览器提供的功能都包含在这个对象里。

• 全局变量和函数 ：在全局作用域中声明的所有变量和函数都成为window对象的属性和方法。
• 窗口大小和滚动 ：
• window.innerWidth和window.innerHeight可以获取浏览器视窗的宽度和高度。
• window.scrollTo(x, y)方法可以滚动到指定的位置。
• 定时器函数 ：
• setTimeout和setInterval用于延迟执行或定期执行代码。
• clearTimeout和clearInterval用于取消定时器。

2. document对象

虽然document对象是DOM的一部分，但它也是BOM的一部分。通过document对象，可以访问和修改页面内容。

• DOM访问 ：document.getElementById、document.querySelector等方法提供了访问DOM元素的方式。
• 创建和删除元素 ：document.createElement、document.removeChild等方法允许动态地操作页面的结构。

3. location对象

location对象包含了与当前窗口的URL相关的信息和一些操作方法。

• 获取URL的部分 ：location.href、location.hostname、location.pathname、location.search、location.hash等属性提供了获取URL的不同部分的能力。
• URL操作 ：location.assign(URL)加载新的文档，location.reload()重新加载当前页面，location.replace(URL)用新的文档替换当前文档。

4. history对象

history对象包含用户的浏览历史。

• 导航 ：history.back()、history.forward()和history.go(n)允许在用户历史中前后移动。

5. navigator对象

navigator对象包含有关浏览器本身的信息。

• 浏览器信息 ：navigator.userAgent、navigator.language、navigator.platform等属性提供了有关浏览器的详细信息。
• 功能检测 ：可以用来检测浏览器支持哪些功能，如navigator.geolocation判断是否支持地理定位。

6. screen对象

screen对象提供了有关用户屏幕的信息。

• 屏幕信息 ：screen.width、screen.height、screen.availWidth、screen.availHeight等属性提供了有关屏幕的尺寸和可用尺寸的信息。

示例

1. 检测浏览器窗口大小 ：

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

2. 修改URL而不重新加载页面 ：

window.history.pushState({}, '', '/new-url');

3. 获取URL查询字符串 ：

var queryString = window.location.search;

4. 检测浏览器类型 ：

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

注意事项

• BOM的特性和行为可能在不同浏览器中有所差异。进行跨浏览器开发时，需要考虑这些差异。
• 使用BOM时，特别是修改URL和浏览器历史时，要注意不要对用户造成困扰。
• 由于安全原因，某些BOM功能可能受到浏览器的限制，例如弹窗可能被拦截。

BOM为开发者提供了强大的能力来与浏览器进行交互。理解和合理利用BOM的功能，可以极大地提升Web应用的用户体验和性能。