BOM 与表单处理

约 318 字大约 1 分钟

布欧-Lewyon

2026-05-16

BOM 对象

// window
window.innerWidth;       // 视口宽度
window.innerHeight;      // 视口高度

// navigator
navigator.userAgent;     // 浏览器信息
navigator.language;      // "zh-CN"
navigator.platform;      // "MacIntel"
navigator.onLine;        // 是否在线

// location
location.href;           // 完整 URL
location.pathname;       // "/page"
location.search;         // "?id=1"
location.hash;           // "#section"
location.reload();       // 刷新

// history
history.back();          // 后退
history.forward();       // 前进
history.go(-1);          // 后退一页
history.pushState({}, '', '/new-url');

定时器

// setTimeout：延迟执行
const timerId = setTimeout(() => {
  console.log('1秒后执行');
}, 1000);

clearTimeout(timerId);   // 取消

// setInterval：间隔执行
const intervalId = setInterval(() => {
  console.log('每秒执行');
}, 1000);

clearInterval(intervalId);  // 取消

// requestAnimationFrame（动画）
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

表单处理

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();  // 阻止默认提交

  // 方式一：逐个获取
  const name = document.querySelector('#name').value;
  const email = document.querySelector('#email').value;

  // 方式二：FormData
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);

  // 文件读取
  const fileInput = document.querySelector('input[type="file"]');
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = (e) => {
    console.log('文件内容', e.target.result);
  };
  reader.readAsText(file);
});

小结

BOM API	用途
`window`	视口、全局属性和方法
`location`	URL 信息与导航
`history`	历史记录管理
`setTimeout` / `setInterval`	延迟/间隔执行

上一节：事件模型与事件委托下一节：Promise 详解