前端大厂最新面试题-BOM.docx

BOM（Browser Object Model）是浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象。其主要作用是跟浏览器做一些交互效果，如页面的后退、前进、刷新、浏览器窗口的变化、滚动条的滚动，以及获取客户的一些信息，如浏览器品牌版本、屏幕分辨率等。 一、BOM 的理解 BOM 是浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象。其主要作用是跟浏览器做一些交互效果，如页面的后退、前进、刷新、浏览器窗口的变化、滚动条的滚动，以及获取客户的一些信息，如浏览器品牌版本、屏幕分辨率等。 二、window 对象 window 对象是 BOM 的核心对象，表示浏览器的一个实例。在浏览器中，window 对象有双重角色，即是浏览器窗口的一个接口，又是全局对象。所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。 window 对象的方法： * moveBy(x, y)：从当前位置水平移动窗体 x 个像素，垂直移动窗体 y 个像素，x 为负数，将向左移动窗体，y 为负数，将向上移动窗体 * moveTo(x, y)：移动窗体左上角到相对于屏幕左上角的 (x, y) 点 * resizeBy(w, h)：相对窗体当前的大小，宽度调整 w 个像素，高度调整 h 个像素。如果参数为负值，将缩小窗体，反之扩大窗体 * resizeTo(w, h)：把窗体宽度调整为 w 个像素，高度调整为 h 个像素 * scrollTo(x, y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为 x 个像素的位置，将纵向滚动条移动到相对于窗体高度为 y 个像素的位置 * scrollBy(x, y)：如果有滚动条，将横向滚动条向左移动 x 个像素，将纵向滚动条向下移动 y 个像素 window.open() 方法： * window.open() 既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口 * 如果 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的 URL 三、location 对象 location 对象描述了当前 URL 的信息： * hash：# 后面的字符，没有则返回空串 * host：服务器名称和端口号 * hostname：域名，不带端口号 * href：完整 URL * pathname：服务器下面的文件路径 * port：url 的端口号，没有则为空 * protocol：使用的协议 * search：url 的查询字符串，通常为？后面的内容 四、navigator 对象 navigator 对象主要用来获取浏览器的属性，区分浏览器类型。其主要属性和方法包括： * userAgent：浏览器的用户代理字符串 * appCodeName：浏览器的代码名称 * appName：浏览器的名称 * appVersion：浏览器的版本号 * platform：浏览器的平台 * language：浏览器的语言 五、screen 对象 screen 对象保存的是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，包括： * width：屏幕的宽度 * height：屏幕的高度 * availWidth：可用的屏幕宽度 * availHeight：可用的屏幕高度 六、history 对象 history 对象主要用来操作浏览器 URL 的历史记录，可以通过参数向前、向后、或者向指定 URL 跳转： * go()：接收一个整数数字或者字符串参数，向最近的一个记录中包含指定字符串的页面跳转 * back()：向后跳转到上一个页面 * forward()：向前跳转到下一个页面 * pushState()：向历史记录中添加一个新的状态 * replaceState()：替换当前历史记录的状态