// querySelectorAll 返回的 NodeList 是静态快照，之后 DOM 变化不影响它
// getElementsBy* 返回的是动态集合，随 DOM 变化自动更新

// 推荐用 Element 版本 — 跳过文本节点和注释
el.children;           // HTMLCollection of Element
el.childNodes;         // NodeList (包含 #text, 注释节点)

// Fragment 批量插入 — 减少回流
const frag = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  frag.appendChild(createItem(i));
}
list.appendChild(frag);  // 一次性插入

// signal 批量解绑
const ctrl = new AbortController();
el1.addEventListener('click', fn1, { signal: ctrl.signal });
el2.addEventListener('click', fn2, { signal: ctrl.signal });
ctrl.abort(); // 一次解绑全部

事件委托

// 父元素监听，e.target 判断来源 — 避免给无数子元素各自绑事件
list.addEventListener('click', (e) => {
  const btn = e.target.closest('.btn');  // 向上查找 .btn
  if (!btn) return;
  console.log('clicked:', btn.dataset.id);
});

自定义事件

// 派发
el.dispatchEvent(new CustomEvent('item-selected', {
  detail: { id: 42, name: 'foo' },
  bubbles: true,    // 是否冒泡
  cancelable: true, // 能否 preventDefault
}));

// 监听
el.addEventListener('item-selected', (e) => console.log(e.detail.id));

// 标准 async/await 封装
async function request(url, options = {}) {
  const res = await fetch(url, options);
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
  return res.json();
}

WebSocket

const ws = new WebSocket('wss://example.com/ws');

ws.onopen    = () => console.log('connected');
ws.onmessage = (e) => console.log('received:', e.data);
ws.onerror   = (e) => console.error(e);
ws.onclose   = (e) => console.log('closed:', e.code, e.reason);

ws.send(JSON.stringify({ type: 'ping' }));
ws.close(1000, 'done');  // code: 1000=正常, 1001=离开

// readyState: 0=CONNECTING, 1=OPEN, 2=CLOSING, 3=CLOSED

Server-Sent Events (SSE)

const es = new EventSource('/events');

es.onmessage = (e) => console.log(e.data);       // 默认事件
es.addEventListener('custom', (e) => console.log(e.data));

es.onerror = (e) => {
  if (es.readyState === EventSource.CLOSED) console.log('closed');
};
es.close();

// readyState: 0=CONNECTING, 1=OPEN, 2=CLOSED

IndexedDB 速写

// 原生 IndexedDB 比较繁琐，推荐使用 idb 库: https://github.com/jakearchibald/idb
// 下面是原生速写：

function openDB(name, version, upgrade) {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(name, version);
    req.onupgradeneeded = (e) => upgrade(e.target.result); // 只有版本变化触发
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

async function dbPut(db, storeName, value) {
  const tx = db.transaction(storeName, 'readwrite');
  tx.objectStore(storeName).put(value);
  await tx.done;  // 等待事务完成
}

Storage 事件

// 同一源的其他 标签页修改 localStorage 时触发
window.addEventListener('storage', (e) => {
  console.log(e.key, e.oldValue, e.newValue, e.url);
});

// rAF 动画循环模板
function animate(timestamp) {
  // timestamp 是 DOMHighResTimeStamp
  box.style.transform = `translateX(${Math.sin(timestamp * 0.001) * 100}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 闲时执行非关键任务
requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length) {
    tasks.shift()();
  }
}, { timeout: 2000 });

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      img.src = img.dataset.src;   // 懒加载
      observer.unobserve(img);
    }
    // entry.intersectionRatio: 0~1
    // entry.boundingClientRect / rootBounds / intersectionRect
  });
}, {
  root: null,       // null = 视口
  rootMargin: '0px',
  threshold: 0.1,   // 0~1, 或 [0, 0.25, 0.5, 0.75, 1]
});

observer.observe(el);
observer.unobserve(el);
observer.disconnect();   // 停止所有观察

// 常用场景: 懒加载、无限滚动、曝光埋点

const observer = new MutationObserver((mutations) => {
  mutations.forEach(m => {
    console.log(m.type);   // 'attributes' | 'characterData' | 'childList'
    console.log(m.target, m.addedNodes, m.removedNodes);
    console.log(m.attributeName, m.oldValue);
  });
});

observer.observe(el, {
  childList: true,         // 子节点增删
  attributes: true,        // 属性变化
  characterData: true,     // 文本变化
  subtree: true,           // 监听所有后代
  attributeOldValue: true, // 记录旧属性值
  attributeFilter: ['class', 'style'], // 只监听这些属性
});

observer.disconnect();

// 常用场景: 富文本编辑器、动态内容监控

const observer = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log(`Element resized: ${width}x${height}`);
    // entry.contentBoxSize: [{ blockSize, inlineSize }]
    // entry.borderBoxSize / devicePixelContentBoxSize
  });
});

observer.observe(el);
observer.unobserve(el);
observer.disconnect();

// 注意: 会在初始化时触发一次 (当前尺寸)
// 比 window.resize 精细: 监听单个元素而非整个视口

File — 继承自 Blob

// <input type="file"> → input.files (FileList)
const file = input.files[0];
console.log(file.name, file.size, file.type, file.lastModified);

// FileReader: 读文件内容
const reader = new FileReader();
reader.onload  = (e) => console.log(e.target.result); // base64/text
reader.onerror = (e) => console.error(e);
reader.readAsDataURL(file);    // → data:image/png;base64,...
reader.readAsText(file);       // → 文本
reader.readAsArrayBuffer(file); // → ArrayBuffer

// 下载文件
function download(blob, filename) {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}

基础绘图

// 矩形
ctx.fillStyle = '#4285F4';
ctx.fillRect(10, 10, 100, 60);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.strokeRect(10, 10, 100, 60);
ctx.clearRect(20, 20, 80, 40);

// 路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();   // 或 ctx.stroke()

// 圆 / 弧
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// 圆角矩形
ctx.beginPath();
ctx.roundRect(10, 10, 100, 60, 8);
ctx.fill();

文字

ctx.font = '24px sans-serif';
ctx.fillStyle = '#333';
ctx.textAlign = 'center';   // left/right/center/start/end
ctx.textBaseline = 'middle'; // top/bottom/middle/alphabetic/hanging
ctx.fillText('Hello Canvas', 100, 100);

// measureText: 预测量文本宽度
const metrics = ctx.measureText('Hello');
console.log(metrics.width);

变换 & 状态

ctx.save();        // 保存当前状态
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);  // 弧度
ctx.scale(2, 1);
ctx.globalAlpha = 0.5;    // 全局透明度
ctx.drawImage(img, 0, 0, 100, 100); // 绘制图片
ctx.restore();     // 恢复

图像处理

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// imageData.data: Uint8ClampedArray [R, G, B, A, R, G, B, A, ...]
for (let i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i]     = 255 - imageData.data[i];     // R 反色
  imageData.data[i + 1] = 255 - imageData.data[i + 1]; // G
  imageData.data[i + 2] = 255 - imageData.data[i + 2]; // B
}
ctx.putImageData(imageData, 0, 0);

getUserMedia (摄像头/麦克风)

try {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 1280, height: 720, facingMode: 'user' },
    audio: true,
  });
  video.srcObject = stream;

  // 枚举设备
  const devices = await navigator.mediaDevices.enumerateDevices();

  // 截帧到 canvas
  canvas.getContext('2d').drawImage(video, 0, 0);
} catch (err) {
  console.error('Permission denied or no device:', err);
}

屏幕共享

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { cursor: 'always' },
  audio: false,
});
stream.getVideoTracks()[0].addEventListener('ended', () => {
  console.log('User stopped sharing');
});

媒体录制 (MediaRecorder)

const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  // play / download
};
recorder.start();        // 开始录制
recorder.pause();        // 暂停
recorder.resume();       // 恢复
recorder.stop();         // 停止 → onstop

Web Audio API 速写

const ctx = new AudioContext();

// 播放音频文件
const response = await fetch('sound.mp3');
const buffer = await ctx.decodeAudioData(await response.arrayBuffer());
const source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);  // → 扬声器
source.start();

// 振荡器
const osc = ctx.createOscillator();
osc.type = 'sine';  // sine/square/sawtooth/triangle
osc.frequency.value = 440; // Hz
osc.connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 1); // 1 秒后停止

Dedicated Worker

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ type: 'compute', data: hugeArray });
worker.onmessage = (e) => console.log('result:', e.data);
worker.onerror = (e) => console.error(e.message, e.filename, e.lineno);
worker.terminate();

// worker.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data.data);
  self.postMessage(result);
};

// Worker 也能使用 importScripts
importScripts('lib1.js', 'lib2.js');

Service Worker (注册 & 生命周期)

// main.js — 注册
if ('serviceWorker' in navigator) {
  const reg = await navigator.serviceWorker.register('/sw.js', { scope: '/' });
  reg.onupdatefound = () => {
    const installing = reg.installing;
    installing.onstatechange = () => {
      if (installing.state === 'installed') {
        if (navigator.serviceWorker.controller) {
          console.log('New SW available, refresh to update');
        }
      }
    };
  };
}

// sw.js — 缓存策略 (Cache First)
self.addEventListener('install', (e) => {
  e.waitUntil(caches.open('v1').then(c => c.addAll(['/', '/app.js', '/style.css'])));
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(cached => cached || fetch(e.request))
  );
});

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
});

postMessage (iframe / window.open)

// 发送 (父页面 → iframe)
iframe.contentWindow.postMessage({ type: 'greeting', text: 'hello' }, 'https://trusted-origin.com');

// 接收
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://trusted-origin.com') return; // 务必校验 origin!
  console.log(e.data, e.source);
  e.source.postMessage('got it!', e.origin);
});

BroadcastChannel (同源广播)

// 同源页面间广播, 比 storage 事件更灵活
const channel = new BroadcastChannel('my-channel');

channel.postMessage({ type: 'logout' });  // 发送

channel.onmessage = (e) => {              // 接收
  console.log(e.data);
};
channel.close();                          // 关闭

SharedWorker

// main.js
const worker = new SharedWorker('shared.js');
worker.port.start();
worker.port.postMessage('hello');
worker.port.onmessage = (e) => console.log(e.data);

// shared.js
const ports = [];
self.onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.onmessage = (e) => console.log(e.data);
};

URL 构造函数

const url = new URL('https://example.com:8080/page?a=1&b=2#hash');

url.protocol   // 'https:'
url.host       // 'example.com:8080'
url.hostname   // 'example.com'
url.port       // '8080'
url.pathname   // '/page'
url.search     // '?a=1&b=2'
url.hash       // '#hash'
url.origin     // 'https://example.com:8080'

// searchParams — URLSearchParams
url.searchParams.get('a');         // '1'
url.searchParams.getAll('a');      // ['1']
url.searchParams.has('a');         // true
url.searchParams.set('c', '3');    // 替换/新增
url.searchParams.append('a', '4'); // 追加同名参数
url.searchParams.delete('b');      // 删除
url.searchParams.toString();       // 'a=1&c=3&a=4'

url.toString();  // 完整序列化
url.toJSON();    // 同 toString

编码 / 解码

encodeURIComponent('你好 世界')     // '%E4%BD%A0%E5%A5%BD%20%E4%B8%96%E7%95%8C'
decodeURIComponent('%E4%BD%A0')     // '你'
encodeURI('https://x.com/你好')     // 'https://x.com/%E4%BD%A0%E5%A5%BD' (保留 :/)
btoa('hello')                       // 'aGVsbG8='  — 字符串 → Base64
atob('aGVsbG8=')                   // 'hello'     — Base64 → 字符串

// TextEncoder / TextDecoder (UTF-8)
new TextEncoder().encode('你好');   // Uint8Array(6) [228, 189, 160, 229, 165, 189]
new TextDecoder().decode(uint8Arr); //  '你好'
new TextDecoder('gbk').decode(buf); // 指定编码

高精度计时

const t0 = performance.now();  // DOMHighResTimeStamp (微秒精度)
doWork();
const t1 = performance.now();
console.log(`耗时: ${t1 - t0}ms`);

// 不要用 Date.now() 测性能 — 精度不够且受系统时间影响

PerformanceObserver (监听性能条目)

// 监控资源加载
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.duration, entry.startTime);
    // entryType: 'resource' | 'navigation' | 'paint' | 'longtask' | 'mark' | 'measure' | ...
  });
});
observer.observe({ type: 'resource', buffered: true });
observer.observe({ type: 'longtask', buffered: true }); // 需要 PerformanceLongTaskTiming
observer.disconnect();

// 监控 Core Web Vitals
observer.observe({ type: 'largest-contentful-paint', buffered: true });   // LCP
observer.observe({ type: 'first-input', buffered: true });                // FID
observer.observe({ type: 'layout-shift', buffered: true });               // CLS

// 自定义 mark / measure
performance.mark('start-task');
doTask();
performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');
const m = performance.getEntriesByName('task-duration')[0];
console.log(m.duration);

Navigation Timing

const [entry] = performance.getEntriesByType('navigation');
const nav = entry.toJSON();  // 或 performance.timing (旧)
// 包含: domContentLoadedEventEnd, loadEventEnd, domInteractive, etc.

crypto.randomUUID / getRandomValues

// 生成 UUID v4
crypto.randomUUID();  // '36b8f84d-df4e-4d49-b662-bcde71a8764f'

// 生成随机值
const arr = new Uint8Array(16);
crypto.getRandomValues(arr);  // 密码学安全的随机数

crypto.subtle (Web Crypto API)

// 哈希 (SHA-256)
const data = new TextEncoder().encode('hello');
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
const hashHex = Array.from(new Uint8Array(hashBuffer))
  .map(b => b.toString(16).padStart(2, '0')).join('');

// HMAC
const key = await crypto.subtle.importKey('raw', keyBytes, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
const sig = await crypto.subtle.sign('HMAC', key, data);

// 生成密钥对
const keyPair = await crypto.subtle.generateKey(
  { name: 'RSA-OAEP', modulusLength: 2048, publicExponent: new Uint8Array([1,0,1]), hash: 'SHA-256' },
  true, ['encrypt', 'decrypt']
);
// 支持的算法: AES-CTR/CBC/GCM, RSA-OAEP/PSS, ECDH, ECDSA, HKDF, PBKDF2

Content Security (SRI / nonce)

// <script src="..." integrity="sha384-..." crossorigin="anonymous"></script>
// CSP header: Content-Security-Policy: script-src 'nonce-abc123'

Clipboard API

await navigator.clipboard.writeText('hello');
const text = await navigator.clipboard.readText();
// 注: 需要 HTTPS 或 localhost, 且通常在用户手势回调中使用

Fullscreen API

el.requestFullscreen();           // 进入全屏
document.exitFullscreen();        // 退出
document.fullscreenElement;       // 当前全屏元素
document.addEventListener('fullscreenchange', () => console.log('changed'));

Notification API

if (Notification.permission === 'granted') {
  new Notification('Title', { body: 'Message', icon: '/icon.png' });
} else if (Notification.permission !== 'denied') {
  const result = await Notification.requestPermission(); // 'granted'|'denied'
}

Geolocation API

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err.code, err.message),
  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);

// 持续监听
const id = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(id);

Page Visibility API

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 页面被隐藏 (切换标签/最小化)
    pauseVideo();
  } else {
    resumeVideo();
  }
});

History API (SPA 路由)

history.pushState({ page: 2 }, '', '/page2');   // 添加记录
history.replaceState({ page: 1 }, '', '/page1'); // 替换当前记录
window.addEventListener('popstate', (e) => {
  console.log(location.pathname, e.state);
});
history.back();  // 后退
history.forward(); // 前进
history.go(-1);  // 后退 1  步

Vibration API 仅移动端

navigator.vibrate(200);             // 震动200ms
navigator.vibrate([100, 50, 100]);  // 震动100ms→停50ms→震动100ms
navigator.vibrate(0);               // 停止震动

matchMedia (响应式 JS)

const mq = window.matchMedia('(max-width: 768px)');
if (mq.matches) { /* 移动端逻辑 */ }
mq.addEventListener('change', (e) => {
  if (e.matches) console.log('entered mobile');
});

// 平滑滚动
window.scrollTo({ top: 500, left: 0, behavior: 'smooth' });

// 获取视口尺寸 (不含滚动条)
const w = document.documentElement.clientWidth;
const h = document.documentElement.clientHeight;

// Feature detection 示例
const supportsWebP = await new Promise(r => {
  const img = new Image();
  img.onload = () => r(true);
  img.onerror = () => r(false);
  img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
});

// SPA 路由核心
function navigate(path) {
  history.pushState({ path }, '', path);
  render(path);
}

window.addEventListener('popstate', (e) => {
  render(location.pathname);
  // e.state 是 pushState 传入的 state
});

HTML5 校验属性

<input required minlength="3" maxlength="20" min="0" max="100" step="5"
       pattern="[A-Z]+" type="email" type="url" type="number">

禁用原生校验气泡，自定义 UI

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (!form.checkValidity()) {
    // 遍历所有无效控件
    [...form.elements].forEach(el => {
      if (!el.validity.valid) {
        showError(el, el.validationMessage);
      }
    });
    return;
  }
  submitData(new FormData(form));
});

// 实时清除错误
input.addEventListener('input', () => {
  input.setCustomValidity('');
  hideError(input);
});

FormData — 构建请求体

const fd = new FormData(form);         // 从表单构建
const fd2 = new FormData();
fd2.append('name', 'value');
fd2.append('file', fileInput.files[0]);
fd2.set('name', 'newValue');           // 覆盖
fd2.delete('name');
fd2.has('name');                       // boolean
fd2.get('name');                       // 第一个值
fd2.getAll('name');                    // 所有值

// 迭代
for (const [k, v] of fd) { console.log(k, v); }

// FormData → 普通对象
Object.fromEntries(fd.entries());

// 被拖元素: 设 draggable="true"
<div draggable="true">Drag me</div>

el.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
  e.dataTransfer.effectAllowed = 'move'; // move|copy|link
  e.dataTransfer.dropEffect = 'move';
});

// 放置区
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();  // 必须!
  e.dataTransfer.dropEffect = 'move';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  dropZone.appendChild(document.getElementById(id));
});

// 文件拖放 (从操作系统)
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files; // FileList
  [...files].forEach(file => {
    console.log(file.name, file.type, file.size);
  });
});

ReadableStream (读取流)

// 从 fetch body 获取流
const res = await fetch('/large-file');
const reader = res.body.getReader();

const decoder = new TextDecoder();
let result = '';
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  result += decoder.decode(value, { stream: true });
  console.log(`Received ${value.length} bytes`);
}
reader.releaseLock(); // 或 reader.cancel()

// 异步迭代 (更简洁)
for await (const chunk of res.body) {
  console.log(chunk); // Uint8Array
}

创建自定义 ReadableStream

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue(new TextEncoder().encode('chunk1'));
    controller.enqueue(new TextEncoder().encode('chunk2'));
    controller.close();
  },
  pull(controller) { /* 被消费端拉取时调用 */ },
  cancel(reason) { /* 流被取消 */ },
});

const reader = stream.getReader();
const { value } = await reader.read(); // Uint8Array('chunk1')

WritableStream (写入流) & pipeTo

// 写入流
const writable = new WritableStream({
  write(chunk) { console.log('received:', chunk); },
  close() { console.log('done'); },
  abort(err) { console.error(err); },
});

const writer = writable.getWriter();
await writer.write('data1');
await writer.write('data2');
await writer.close();

// pipeTo — 流对接
readableStream.pipeTo(writableStream);
readableStream.pipeThrough(new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  }
}));

TextEncoderStream / TextDecoderStream

// 可读文本流 → 实时逐行处理
const res = await fetch('/api/stream');
res.body
  .pipeThrough(new TextDecoderStream())
  .pipeTo(new WritableStream({
    write(chunk) { processLine(chunk); }
  }));
// 或
for await (const chunk of res.body.pipeThrough(new TextDecoderStream())) { ... }

Web Share API

// 调起系统分享面板 (需用户手势触发)
if (navigator.canShare?.({ files: [...] })) {  // 检测文件分享支持
  await navigator.share({
    title: 'Title',
    text: 'Description',
    url: 'https://example.com',
    // files: [file],  // 可选
  });
}

Permissions API

// 查询权限状态
const status = await navigator.permissions.query({ name: 'geolocation' });
console.log(status.state); // 'granted' | 'denied' | 'prompt'
status.addEventListener('change', () => {
  console.log('Permission changed to:', status.state);
});

// 支持的权限名: geolocation, notifications, camera, microphone,
// midi, push, accelerometer, gyroscope, magnetometer, clipboard-read, clipboard-write

Screen Wake Lock (防止锁屏)

let wakeLock = null;
async function keepAwake() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => console.log('wake lock released'));
  } catch (err) { console.error(err); }
}
async function release() { await wakeLock?.release(); wakeLock = null; }

Screen Orientation (屏幕方向)

const { type, angle } = screen.orientation;
// type: 'portrait-primary' | 'landscape-primary' | 'portrait-secondary' | 'landscape-secondary'
screen.orientation.addEventListener('change', () => {
  console.log('orientation changed:', screen.orientation.type);
});

// 锁定方向 (需全屏)
await screen.orientation.lock('portrait'); // 'any'|'natural'|'landscape'|'portrait'|...
screen.orientation.unlock();

Battery Status Chrome

const battery = await navigator.getBattery();
battery.level;          // 0~1
battery.charging;       // boolean
battery.chargingTime;   // 秒
battery.dischargingTime;
battery.addEventListener('levelchange', () => console.log(battery.level));

Device Memory Chrome

navigator.deviceMemory; // 0.25, 0.5, 1, 2, 4, 8 (GB), 用于自适应降级

Gamepad API

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad connected:', e.gamepad.id);
  pollGamepad();
});

function pollGamepad() {
  const gamepads = navigator.getGamepads();
  const gp = gamepads[0];
  if (gp) {
    console.log(gp.axes);  // 摇杆位置 [-1, 1]
    console.log(gp.buttons.map(b => b.pressed)); // 按钮状态
  }
  requestAnimationFrame(pollGamepad);
}

Web MIDI

const access = await navigator.requestMIDIAccess();
for (const [id, input] of access.inputs) {
  input.onmidimessage = (e) => console.log(e.data); // [status, note, velocity]
}
for (const [id, output] of access.outputs) {
  output.send([0x90, 60, 127]); // Note On: C4, velocity 127
}

Selection API

const sel = window.getSelection();
sel.anchorNode;          // 选区起点节点
sel.focusNode;           // 选区终点节点
sel.anchorOffset;        // 起点偏移
sel.rangeCount;          // 选区片段数 (Firefox 支持多选区)
sel.isCollapsed;         // 是否光标 (无选中内容)
sel.toString();          // 选中文本
sel.getRangeAt(0);       // 获取 Range 对象

// 用 Range 编程式选中
const range = document.createRange();
range.selectNodeContents(el);
range.setStart(el, 0);
range.setEnd(el, 2);
sel.removeAllRanges();
sel.addRange(range);
sel.deleteFromDocument(); // 删除选中内容