Python笔记

浏览器对象（通常被称为 BOM，Browser Object Model）是前端开发中与浏览器进行交互的基础。

下面将详细介绍这些常用的浏览器对象。

概述

BOM 允许 JavaScript 与浏览器“对话”，它没有正式的标准，但所有现代浏览器都实现了类似的功能和对象。这些对象的核心是 window 对象。

1. Window 对象

描述：window 对象是 BOM 的核心，它代表浏览器的窗口。所有全局 JavaScript 对象、函数和变量都自动成为 window 对象的成员。它也是 DOM 的根节点。

主要属性和方法：

属性:

window.innerHeight / window.innerWidth：获取浏览器窗口的视口高度和宽度（包括滚动条）。
window.outerHeight / window.outerWidth：获取整个浏览器窗口的高度和宽度。
window.location：返回 Location 对象，用于当前窗口的 URL信息。
window.document：返回 Document 对象，代表窗口中加载的页面。
window.navigator：返回 Navigator 对象，提供关于浏览器的信息。
window.history：返回 History 对象，提供操作浏览器会话历史的方法。
window.screen：返回 Screen 对象，提供用户屏幕的信息。
window.console：提供对浏览器控制台的访问。

方法:

window.alert() / window.confirm() / window.prompt()：显示警告、确认和提示对话框。
window.open() / window.close()：打开或关闭一个新的浏览器窗口。
window.setTimeout() / window.clearTimeout()：在指定的延迟后执行代码（仅一次）。
window.setInterval() / window.clearInterval()：每隔指定的时间间隔重复执行代码。
window.scrollTo()：滚动文档到指定坐标。
window.getComputedStyle()：获取元素的所有最终使用的 CSS 属性值。

示例：

// 获取视口尺寸
let viewportHeight = window.innerHeight;
console.log(`视口高度：${viewportHeight}px`);

// 等待2秒后执行
setTimeout(() => {
  alert('2秒钟过去了！');
}, 2000);

// 打开一个新窗口
let newWindow = window.open('https://www.example.com', '_blank');

// 因为 window 是全局对象，以下写法是等价的
console.log('Hello');
window.console.log('Hello');

2. Navigator 对象

描述：navigator 对象包含了关于浏览器的信息，如名称、版本、平台和用户代理字符串。

主要属性和方法：

属性:

navigator.userAgent：返回浏览器的用户代理字符串（但此信息可能不可靠，容易被篡改）。
navigator.platform：返回运行浏览器的操作系统平台。
navigator.language：返回浏览器的首选语言。
navigator.cookieEnabled：返回一个布尔值，表示浏览器是否启用 cookie。
navigator.onLine：返回一个布尔值，表示浏览器是否联网。
navigator.geolocation：返回一个 Geolocation 对象，用于获取用户的地理位置信息。

方法:

navigator.clipboard：提供读写系统剪贴板的能力（需要用户授权）。
navigator.mediaDevices.getUserMedia()：用于访问用户的摄像头和麦克风（需要用户授权）。

示例：

// 检测浏览器语言
console.log(`你的浏览器语言是：${navigator.language}`);

// 检查是否在线
if (navigator.onLine) {
  console.log('在线状态');
} else {
  console.log('已离线');
}

// 获取地理位置（需要用户授权）
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(`纬度：${position.coords.latitude}`);
    console.log(`经度：${position.coords.longitude}`);
  });
} else {
  console.log('该浏览器不支持地理位置功能');
}

3. Screen 对象

描述：screen 对象包含用户屏幕的信息，如宽度、高度和颜色深度。

主要属性：

screen.width / screen.height：返回屏幕的总宽度和高度（像素）。
screen.availWidth / screen.availHeight：返回屏幕的可用宽度和高度（不包括任务栏等界面特性）。
screen.colorDepth：返回屏幕的颜色深度（比特每像素）。

示例：

// 获取屏幕分辨率
console.log(`你的屏幕分辨率是：${screen.width} x ${screen.height}`);

// 获取可用屏幕空间（用于确定窗口最大可设置大小）
console.log(`可用屏幕空间：${screen.availWidth} x ${screen.availHeight}`);

4. Location 对象

描述：location 对象包含了当前窗口的 URL 信息，并且可以用来重定向浏览器到新的页面。

主要属性和方法：

属性（解析当前 URL）:

location.href：完整的 URL。
location.protocol：协议（如 https:）。
location.host：主机名和端口。
location.hostname：主机名（如 www.example.com）。
location.port：端口号。
location.pathname：URL 的路径部分（如 /path/page.html）。
location.search：查询字符串（URL 参数），以 ? 开头（如 ?id=123&name=foo）。
location.hash：锚部分（片段标识符），以 # 开头（如 #section1）。

方法:

location.assign(url)：加载一个新的文档。
location.replace(url)：用新文档替换当前文档，不会在历史记录中生成新记录（用户不能点击“后退”按钮回到前一页）。
location.reload()：重新加载当前文档。

示例：

// 获取当前页面的完整 URL
console.log(`当前页面是：${location.href}`);

// 获取 URL 参数
let urlParams = new URLSearchParams(location.search);
let id = urlParams.get('id'); // 假设 URL 是 ...?id=100
console.log(`ID 参数是：${id}`);

// 跳转到新页面
location.assign('https://www.baidu.com');
// 或者直接设置 href
// location.href = 'https://www.baidu.com';

// 替换当前页面（不保存历史记录）
// location.replace('https://www.bing.com');

// 刷新页面
// location.reload();

5. Document 对象

描述：document 对象是 DOM（Document Object Model）的入口点，它代表了在浏览器窗口中加载的整个页面。通过它，我们可以访问和操作页面上的所有内容（元素、样式、事件等）。

主要属性和方法：

属性:

document.title：获取或设置文档的标题。
document.URL：返回文档的完整 URL。
document.head / document.body：分别指向 <head> 和 <body> 元素。
document.forms / document.images / document.links：返回文档中所有表单、图像或链接的集合。

方法（元素选择）:

document.getElementById(id)：通过 ID 获取元素。
document.querySelector(cssSelector)：返回匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll(cssSelector)：返回匹配指定 CSS 选择器的所有元素的 NodeList。
document.getElementsByClassName(className)：通过类名获取元素集合。
document.getElementsByTagName(tagName)：通过标签名获取元素集合。

方法（元素创建和操作）:

document.createElement(tagName)：创建一个新的 HTML 元素。
document.createTextNode(text)：创建一个文本节点。
document.appendChild(node)：向元素添加一个子节点。

示例：

// 修改页面标题
document.title = '新的页面标题';

// 通过 ID 获取元素并修改内容
let myElement = document.getElementById('myDiv');
myElement.innerHTML = '<p>内容已改变！</p>';

// 通过选择器获取第一个按钮并添加点击事件
let firstButton = document.querySelector('button');
firstButton.addEventListener('click', () => {
  alert('按钮被点击了！');
});

// 创建新元素并添加到 body 中
let newParagraph = document.createElement('p');
let textNode = document.createTextNode('这是一个新段落。');
newParagraph.appendChild(textNode);
document.body.appendChild(newParagraph);

6. History 对象

描述：history 对象包含了浏览器的历史记录（在当前标签页中访问过的页面栈）。它允许我们在不刷新页面的情况下，通过脚本在历史记录中导航。

主要属性和方法：

属性:

history.length：返回会话历史中的记录数量。

方法:

history.back()：向后移动一页（等同于点击浏览器的“后退”按钮）。
history.forward()：向前移动一页（等同于点击浏览器的“前进”按钮）。
history.go(n)：从当前页面在历史记录中移动 n 步。go(-1) 等同于 back()，go(1) 等同于 forward()。
history.pushState(state, title, url)：向历史记录栈添加一个状态，改变 URL 但不刷新页面（用于单页面应用 SPA）。
history.replaceState(state, title, url)：修改当前历史记录条目，改变 URL 但不刷新页面。

示例：

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

// 前进一页
history.forward();

// 前进或后退多页
history.go(-2); // 后退两页

// 单页面应用（SPA）中改变 URL
// 假设当前 URL 是 /page1
history.pushState({ page: 2 }, 'Page 2 Title', '/page2');
// 此时浏览器地址栏会显示 /page2，但页面不会刷新。
// 用户点击后退按钮会触发 popstate 事件，你可以监听它来更新页面内容。

总结

这些浏览器对象共同构成了强大的 BOM，使得 JavaScript 能够：

与窗口交互（Window）
获取浏览器和系统信息（Navigator, Screen）
控制页面导航和 URL（Location, History）
操作页面内容和结构（Document）

理解这些对象是成为一名优秀前端开发者的基础。

以土豆之名，行学习之实

Python （应用实践）

浏览器对象BOM

概述

1. Window 对象

2. Navigator 对象

3. Screen 对象

4. Location 对象

5. Document 对象

6. History 对象

总结