BOM操作

BOM（浏览器对象模型）是JavaScript与浏览器交互的接口，它提供了访问浏览器窗口和功能的对象。

window对象

window是BOM的核心对象，代表浏览器窗口，是全局对象。所有全局变量和函数都是window的属性和方法。

javascript 
// 全局变量是window的属性
var globalVar = '全局变量';
console.log(window.globalVar); // '全局变量'

// 全局函数是window的方法
function globalFunc() {
  console.log('全局函数');
}
window.globalFunc(); // '全局函数'

窗口尺寸

内宽内高

获取浏览器窗口的内部宽度和高度（不含工具栏和滚动条）：

javascript 
const innerWidth = window.innerWidth;
const innerHeight = window.innerHeight;
console.log(`内部宽度: ${innerWidth}, 内部高度: ${innerHeight}`);

外宽外高

获取浏览器窗口的外部宽度和高度（含工具栏和滚动条）：

javascript 
const outerWidth = window.outerWidth;
const outerHeight = window.outerHeight;
console.log(`外部宽度: ${outerWidth}, 外部高度: ${outerHeight}`);

窗口位置

获取或设置浏览器窗口相对于屏幕的位置：

javascript 
// 获取位置
const screenLeft = window.screenLeft; // IE、Safari
const screenTop = window.screenTop; // IE、Safari

const screenX = window.screenX; // Firefox、Chrome
const screenY = window.screenY; // Firefox、Chrome

// 设置位置（在某些浏览器中可能被阻止）
window.moveTo(100, 100); // 移动到屏幕坐标(100, 100)
window.moveBy(50, 50); // 相对当前位置移动50px

窗口操作

打开新窗口

javascript 
const newWindow = window.open(
  'https://example.com',
  'newWindow',
  'width=500,height=400,top=100,left=100'
);

关闭窗口

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

// 关闭指定窗口
newWindow.close();

窗口滚动

javascript 
// 滚动到指定位置
window.scrollTo(0, 500); // 滚动到顶部500px处

// 相对当前位置滚动
window.scrollBy(0, 100); // 向下滚动100px

// 平滑滚动
window.scrollTo({
  top: 500,
  behavior: 'smooth'
});

导航和历史

location对象

location对象包含当前URL的信息，并提供了导航功能：

javascript 
// URL信息
console.log(location.href); // 完整URL
console.log(location.protocol); // 协议（http: 或 https:）
console.log(location.host); // 主机名和端口
console.log(location.hostname); // 主机名
console.log(location.port); // 端口
console.log(location.pathname); // 路径
console.log(location.search); // 查询字符串
console.log(location.hash); // 哈希值

// 导航
location.assign('https://example.com'); // 导航到新URL
location.replace('https://example.com'); // 替换当前URL（不保留历史记录）
location.reload(); // 重新加载页面
location.reload(true); // 强制从服务器重新加载

history对象

history对象包含浏览器的历史记录：

javascript 
// 前进后退
history.back(); // 后退一页
history.forward(); // 前进一页
history.go(-2); // 后退两页
history.go(1); // 前进一页

// 历史记录长度
console.log(history.length);

// 添加历史记录条目
history.pushState({ page: 1 }, '页面1', '/page1');

// 替换当前历史记录条目
history.replaceState({ page: 2 }, '页面2', '/page2');

屏幕信息

screen对象

screen对象包含有关用户屏幕的信息：

javascript 
console.log(screen.width); // 屏幕宽度
console.log(screen.height); // 屏幕高度
console.log(screen.availWidth); // 可用屏幕宽度（不含任务栏）
console.log(screen.availHeight); // 可用屏幕高度（不含任务栏）
console.log(screen.colorDepth); // 颜色深度
console.log(screen.pixelDepth); // 像素深度

弹出框

alert

显示警告框：

javascript 
alert('这是一个警告框');

confirm

显示确认框，返回布尔值：

javascript 
const result = confirm('你确定要删除吗？');
if (result) {
  console.log('用户点击了确定');
} else {
  console.log('用户点击了取消');
}

prompt

显示提示框，返回用户输入的值：

javascript 
const name = prompt('请输入你的名字:', '默认名字');
if (name !== null) {
  console.log(`你好, ${name}!`);
} else {
  console.log('用户点击了取消');
}

定时器

setTimeout

在指定时间后执行一次函数：

javascript 
const timeoutId = setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 取消定时器
clearTimeout(timeoutId);

setInterval

每隔指定时间执行一次函数：

javascript 
const intervalId = setInterval(() => {
  console.log('每隔2秒执行一次');
}, 2000);

// 取消定时器
clearInterval(intervalId);

navigator对象包含有关浏览器的信息：

javascript 
console.log(navigator.userAgent); // 用户代理字符串
console.log(navigator.appName); // 浏览器名称
console.log(navigator.appVersion); // 浏览器版本
console.log(navigator.platform); // 操作系统平台
console.log(navigator.language); // 浏览器语言
console.log(navigator.cookiesEnabled); // 是否启用Cookie

地理位置

使用navigator.geolocation获取用户地理位置：

javascript 
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    position => {
      console.log(`纬度: ${position.coords.latitude}`);
      console.log(`经度: ${position.coords.longitude}`);
    },
    error => {
      console.error('获取地理位置失败:', error.message);
    }
  );
} else {
  console.log('浏览器不支持地理位置');
}

存储

localStorage

localStorage用于持久化存储数据，关闭浏览器后数据不会丢失：

javascript 
// 存储数据
localStorage.setItem('name', 'John');
localStorage.setItem('age', '30');

// 获取数据
const name = localStorage.getItem('name');
const age = localStorage.getItem('age');

// 删除数据
localStorage.removeItem('age');

// 清空所有数据
localStorage.clear();

sessionStorage

sessionStorage用于临时存储数据，关闭标签页或窗口后数据会丢失：

javascript 
// 存储数据
sessionStorage.setItem('name', 'John');

// 获取数据
const name = sessionStorage.getItem('name');

// 删除数据
sessionStorage.removeItem('name');

// 清空所有数据
sessionStorage.clear();

学习资源

继续学习：事件处理

最后更新：2026-02-08