浏览器API需按需调用且受安全上下文、执行时机、权限状态等严格约束：HTTPS/localhost为部分API强制要求；DOM操作须确保节点存在；fetch需手动检查response.ok；Permissions API可预查授权状态。
JavaScript 操作浏览器 API 不是“学一套通用方法”，而是按需调用具体接口——每个 API 解决一类实际问题，且行为受权限、上下文、安全策略严格约束。
哪些浏览器 API 必须在安全上下文中运行
现代浏览器强制要求部分 API 只能在 https:// 或 localhost 下使用，否则直接抛错或静默失败。
-
navigator.geolocation.getCurrentPosition()：在 HTTP 页面中会触发SecurityError -
navigator.mediaDevices.getUserMedia()：非安全上下文返回NotAllowedError -
localStorage和sessionStorage在某些隐私模式下可能被禁用或抛出SecurityError
开发时务必检查控制台错误信息，而不是假设“代码没报错就一定生效”。本地开发可用 http://localhost:3000，但不能用 file:// 协议打开 HTML 文件来测试。
DOM 操作类 API 的常见误用点
看似简单的 document.getElementById() 或 querySelector() 经常出问题，核心原因是执行时机不对。
立即学习“Java免费学习笔记（深入）”；
- 脚本放在
<head>里，但 DOM 尚未加载 → 返回null - 监听
click但元素是后续通过 JS 动态插入的 → 事件绑定失效 - 用
innerHTML插入含<script>的字符串 → 脚本不会执行
推荐做法：用 DOMContentLoaded 事件包裹初始化逻辑，或把 <script> 放在 </body> 前；对动态内容用事件委托（如监听父容器的 click，再用 event.target.matches('.btn') 判断）。
fetch() 与 XMLHttpRequest 的关键差异
两者都能发请求，但默认行为和错误处理逻辑完全不同，混用容易踩坑。
-
fetch()成功只表示网络可达，response.ok === false（如 404/500）仍算“成功”，必须手动检查 -
XMLHttpRequest的onerror会在网络失败、CORS 拒绝、超时时触发，而fetch()的catch只捕获网络异常，CORS 错误会表现为TypeError: Failed to fetch -
fetch()默认不带 cookie，需显式传{ credentials: 'include' }；XMLHttpRequest默认携带
示例：正确处理 fetch() 的 HTTP 错误：
fetch('/api/data')
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.catch(err => console.error('请求失败:', err));
Permissions API 是唯一能预判用户是否授权的方式
别再靠“调用后弹窗 + try/catch”来判断权限状态。很多 API（如通知、定位、摄像头）支持提前查询当前权限状态。
-
navigator.permissions.query({ name: 'notifications' })返回'granted'/'denied'/'prompt' -
name值必须准确：'geolocation'、'camera'、'microphone'等，大小写敏感 - 返回 Promise，但部分旧浏览器（如 Safari ≤16.4）不支持，需降级为尝试调用后监听
PermissionDeniedError
权限状态会随用户操作实时变化，建议在关键操作前重新查询，而不是缓存一次结果长期使用。
