浏览器核心对象解析：window、navigator、screen 等
在浏览器对象中，window、navigator、screen、location、document以及Cookie`这几个核心对象，是构建丰富网页功能与优质用户体验的基石。
window
window对象是浏览器对象模型（BOM）的核心，也是 JavaScript 中的全局对象。
在浏览器环境下，所有全局变量和函数都是window对象的属性和方法。例如，直接定义的变量var myVar = 10;，实际上等价于window.myVar = 10; 。
var name = 'zs'
console.log(window.nam) // zs
window对象提供了众多实用功能。例如：
window对象有**innerWidth和innerHeight**属性，可以获取浏览器窗口的内部宽度和高度; outerWidth/outerHeight：整个浏览器窗口尺寸
// 窗口操作
window.open('https://example.com', '_blank', 'width=600,height=400');
window.close(); // 关闭当前窗口
// 滚动控制
window.scrollTo(0, 100); // 绝对滚动
window.scrollBy(0, 50); // 相对滚动
// 定时器
const timer = setTimeout(() => {}, 1000);
clearTimeout(timer);
// 事件监听
window.addEventListener('resize', handleResize);
navigator
navigator对象主要用于获取浏览器的相关信息。
navigator.appName：浏览器名称；navigator.appVersion：浏览器版本；navigator.language：浏览器设置的语言；navigator.platform：操作系统类型；navigator.userAgent：浏览器设定的User-Agent字符串。
screen：了解设备屏幕的 “探测器”
screen对象专注于提供用户设备屏幕的相关信息，如：
userAgent：浏览器用户代理字符串；platform：操作系统平台；language：浏览器首选语言
geolocation：地理位置API；clipboard：剪贴板API；mediaDevices：媒体设备访问
// 设备类型检测
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// 语言检测
const userLanguage = navigator.language || navigator.userLanguage;
// 地理位置获取
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('纬度:', position.coords.latitude);
console.log('经度:', position.coords.longitude);
},
(error) => {
console.error('获取位置失败:', error);
}
);
// 剪贴板操作
navigator.clipboard.writeText('要复制的文本')
.then(() => console.log('复制成功'))
.catch(err => console.error('复制失败:', err));
location
location对象隶属于window对象，专门用于管理当前页面的 URL 地址。location.href属性用于获取或设置完整的 URL 地址，修改该属性即可实现页面跳转，如location.href = "``https://www.example.com``"; ，能将页面重定向到指定网址。
location获取URL的各个部分：
// 获取URL各部分
console.log('协议:', location.protocol); // https:
console.log('主机:', location.host); // example.com:8080
console.log('路径:', location.pathname); // /path/page.html
console.log('查询:', location.search); // ?id=123
console.log('哈希:', location.hash); // #section
// 导航控制
location.assign('https://newurl.com'); // 记录历史
location.replace('https://newurl.com'); // 不记录历史
location.reload(); // 重新加载
document：操作页面内容
Document 对象是浏览器 DOM（文档对象模型）的核心接口，代表整个 HTML 文档。它是访问和操作页面内容的入口点。
使用document.createElement()方法能够创建新的 HTML 元素
<div id="name">name</div>
<script>
// 创建一个`<div>`元素
const div = document.createElement("div");
div.innerHTML = "hello world";
// 向文档中添加新元素
document.body.appendChild(div);
document.querySelectorAll("div").forEach((item) => {
console.log(item.innerHTML); // name hello world
});
</script>
document.getElementById()和document.querySelector()方法用于获取页面中已有的元素，前者通过元素的id属性精准定位，后者则依据 CSS 选择器灵活选取元素。
<div id="name"></div>
<script>
const el = document.getElementById("name");
const el1 = document.querySelector('#name')
console.log(el); // true
</script>
Cookie：存储信息
Cookie 是 Web 开发中用于在客户端存储小型数据的重要机制，主要用于会话管理、个性化设置和用户追踪等场景。
-
本质
- 存储数据大小：最大通常为 4KB
- 存储方式：使用键值对存储，
name=value格式 - 域和路径绑定：只能被设置它们的域/路径访问
- 自动携带：浏览器会在每次请求中自动发送匹配的 Cookie
-
Cookie操作
// 设置 Cookie document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/"; // 读取所有 Cookie const allCookies = document.cookie; // 返回 "cookie1=value1; cookie2=value2" // 删除 Cookie（通过设置过期时间为过去） document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; -
使用场景
用户认证、用户偏好设置、购物车数据
