BOM的五大对象

BOM（浏览器对象模型）是JavaScript与浏览器通讯的接口，它包括5个对象：window、document、navigator、screen、history。下面是各个对象的方法概念及代码案例。

1.window对象：表示浏览器中打开的窗口，是BOM的核心对象。

常用方法：

• alert()：弹出一个警告框，用于提示用户。
• confirm()：弹出一个确认框，用于确认或取消某个操作。
• prompt()：弹出一个输入框，用于用户输入一些内容。
• setTimeout()：在指定的毫秒数后执行一次指定的函数或一段代码。
• setInterval()：每隔指定的毫秒数重复执行一次指定的函数或一段代码。

示例代码：

// 弹出警告框
window.alert('Hello World!');

// 弹出确认框
if (window.confirm('你确定要删除吗？')) {
  // 删除操作
}

// 弹出输入框
const name = window.prompt('请输入你的姓名：');
console.log(name);

// 延时执行
window.setTimeout(() => {
  console.log('2秒后执行的代码');
}, 2000);

// 定时重复执行
let count = 0;
window.setInterval(() => {
  count++;
  console.log(`第${count}次执行`);
}, 1000);

2.document对象：表示当前窗口或框架内加载的文档，提供对文档的访问和操作。

常用方法：

• getElementById()：根据id属性获取一个元素节点。
• getElementsByClassName()：根据class属性获取一组元素节点。
• getElementsByTagName()：根据标签名获取一组元素节点。
• querySelector()：根据CSS选择器获取一个元素节点。
• querySelectorAll()：根据CSS选择器获取一组元素节点。

示例代码：

<!-- HTML代码 -->
<ul id="list">
  <li class="item">第一项</li>
  <li class="item">第二项</li>
  <li class="item">第三项</li>
</ul>

// 根据id获取元素
const list = document.getElementById('list');
console.log(list);

// 根据class获取元素
const items = document.getElementsByClassName('item');
console.log(items);

// 根据标签名获取元素
const lis = document.getElementsByTagName('li');
console.log(lis);

// 根据CSS选择器获取元素
const firstItem = document.querySelector('.item');
console.log(firstItem);

const allItems = document.querySelectorAll('.item');
console.log(allItems);

3.navigator对象：表示浏览器的信息，可以获取用户代理字符串、浏览器名称、版本等信息。

常用属性：

• userAgent：获取用户代理字符串。
• appName：获取浏览器名称。
• appVersion：获取浏览器版本。
• platform：获取操作系统平台。

示例代码：

console.log(navigator.userAgent);
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.platform);

4.screen对象：表示用户的屏幕信息，可以获取屏幕宽度、高度等信息。

常用属性：

• width：获取屏幕宽度。
• height：获取屏幕高度。

示例代码：

console.log(screen.width);
console.log(screen.height);

5.history对象：表示浏览器的历史记录，用于前进、后退等操作。

常用方法：

• back()：回到上一页。
• forward()：前进到下一页。
• go()：前进或后退指定的页面数，可以为负数表示后退。

示例代码：

// 后退到上一页
window.history.back();

// 前进到下一页
window.history.forward();

// 后退两页
window.history.go(-2);