JavaScript对象体系与浏览器对象模型

JavaScript 的对象体系，说复杂也不复杂，关键在于你有没有搞懂浏览器那一套。window 对象是老大，所有东西都挂在它底下。比如弹窗用alert()，定时器用setTimeout()或setInterval()，这些都挺常用。你平时写document，其实后面默认就有个window，省着写也能跑。

文档的操作就靠document 对象，比如你想拿到某个 ID 的 DOM 元素，用document.getElementById()就行，响应也快，代码也简单。而想控制浏览器地址？那就看location 对象，改 URL、读参数啥的，它都能搞定。

还有个概念叫BOM（浏览器对象模型），其实就是一堆能控制浏览器行为的接口。想开新窗口、跳转页面、获取浏览器信息，全靠它。window 对象里这些方法都打包好了，直接用，比如createPopup()（虽然现在用得少，但老项目偶尔还会见到）。

定时器是个好东西，轮播图、倒计时、自动刷新都离不开它。setInterval()可以周期执行，setTimeout()适合一次性任务。需要停下来的话，就用clearInterval()或clearTimeout()，搭配返回的 ID 用就行。

浏览器对象之间的层级结构要搞清楚。window 是顶层，document 是页面内容，location 是地址栏。掌握这几层的关系，你写 JS 就会更顺手。比如你想根据 URL 里的参数切换页面内容？location.search一抓就能用。

不过要注意，不同浏览器对 BOM 的支持不太一样。写代码的时候，最好在 Chrome、Firefox、Edge 都跑一下，尤其是 window 的一些老 API，IE 还能用，现代浏览器就不认了。

如果你打算做个动态网页，像轮播图、定时弹窗、页面局部刷新，这些对象和方法都能派上用场。掌握好了这些，你的页面能更“活”，用户体验也会好多。

相关的资料我整理了几个，都是比较实用的：

• JavaScript 的 document 对象和 window 对象详解
• javascript Window 及 document 对象详细整理
• window.location 和 document.location 的区别

如果你刚开始接触 BOM 或对这些对象还不熟，建议先多动手写点小 demo 试试看，熟了之后效率会高多。