JS中BOM相关知识点总结(必看篇)

那我来给您讲解一下。

那我来给您讲解一下。

JS中BOM相关知识点总结(必看篇)

BOM是浏览器对象模型(Browser Object Model)的缩写，是JavaScript与浏览器之间的交互接口，通过它可以获取和操作浏览器的窗口、框架、历史记录等信息。下面是JS中BOM的相关知识点总结：

1. window对象

window对象是指浏览器打开的窗口，它是BOM中的顶层对象。JavaScript中，可以通过window对象获取或设置一些窗口级别的属性、方法和事件。

1.1. 窗口尺寸和位置

通过window对象可以获取或设置窗口的尺寸和位置属性。

// 获取窗口尺寸
var width = window.innerWidth;
var height = window.innerHeight;

// 设置窗口位置
window.moveTo(x, y); // 设置窗口在屏幕上的绝对位置
window.moveBy(x, y); // 以当前位置为基准，向右(x)和下方(y)移动窗口

1.2. 窗口打开和关闭

通过window对象可以打开或关闭浏览器窗口。

// 打开一个新窗口
window.open(url, name, features, replace);

// 关闭当前窗口
window.close();

2. location对象

location对象是指当前浏览器窗口显示的页面地址，它是BOM中的一个重要对象。JavaScript中，可以通过location对象获取或设置当前页面地址、查询字符串等信息。

2.1. 获取地址信息

可以通过location对象获取页面的URL、协议、主机名、端口号、路径以及查询字符串。

// 获取页面URL
var url = location.href;

// 获取协议
var protocol = location.protocol;

// 获取主机名
var hostname = location.hostname;

// 获取端口号
var port = location.port;

// 获取路径
var pathname = location.pathname;

// 获取查询字符串
var search = location.search;

2.2. 修改地址信息

可以通过location对象修改页页面地址、查询字符串等信息。

// 修改页面地址
location.href = "http://www.example.com";

// 修改查询字符串
location.search = "?page=1&limit=10";

// 重新载入页面
location.reload();

3. history对象

history对象是指浏览器窗口的历史记录，通过它可以访问浏览器的前进、后退等功能。

3.1. 访问浏览器历史

可以通过history对象访问浏览器的历史记录。

// 获取历史记录长度
var length = history.length;

// 返回历史记录中的第n项
history.go(n); // 如：history.go(-1) 返回上一页

// 返回上一页
history.back();

// 返回下一页
history.forward();

3.2. 修改浏览器历史

可以通过history对象修改浏览器的历史记录。

// 在历史记录中添加一条记录
history.pushState(stateObject, title, url);

// 修改当前历史记录
history.replaceState(stateObject, title, url);

示例

示例1：使用location对象跳转页面

// 点击按钮跳转到指定页面
document.getElementById("btn").onclick = function() {
    location.href = "http://www.example.com";
}

示例2：使用history对象返回上一页

// 点击按钮返回上一页
document.getElementById("btn").onclick = function() {
    history.back();
}

希望上述内容能够帮助您更好的理解JS中BOM相关知识点。