js常用原生api

原生 JavaScript API（通常被称为 Web API）非常庞大，涵盖了从 DOM 操作到硬件交互（如蓝牙、USB）的方方面面。

要查询最权威、最详尽的文档，全球开发者公认的“圣经”是：

🌍 推荐查询网站

1. MDN Web Docs (Mozilla Developer Network)

   • 网址：developer.mozilla.org
   • 理由：这是最准确、更新最快的文档，包含所有 API 的参数、示例、浏览器兼容性表。支持中文。

2. Can I Use

   • 网址：caniuse.com
   • 理由：专门查询某个新 API 在不同版本浏览器上的兼容情况。

🚀 常用的原生 JavaScript API 分类概览

除了你之前用到的 TreeWalker 和 firstElementChild，以下是项目中经常会用到的 API：

1. 选择与操作 DOM (Document Object Model)

这是你目前在 AIMessage.vue 中处理 Markdown 渲染最常用的：

• querySelector / querySelectorAll: 最强大的 CSS 选择器匹配。
• closest() : 向上查找最近的符合条件的父元素（在你的 PlantUML 逻辑中很有用）。
• getBoundingClientRect() : 获取元素的大小及其相对于视口的位置（做拖拽、浮窗缩放时必用）。
• classList: add(), remove(), toggle() 动态修改类名。

2. 交互与观察 (Observer APIs)

这类 API 性能极高，适合处理复杂的交互：

• IntersectionObserver: 观察元素是否进入视野。可用于图片懒加载或无限滚动加载。
• MutationObserver: 监听 DOM 树的变化。如果你想在 Markdown 渲染完成后立即执行代码逻辑，这个非常管用。
• ResizeObserver: 监听元素大小的变化（比如侧边栏收缩导致看板需要重绘）。

3. 异步与通信 (Network & Async)

• Fetch API: 替代原来的 AJAX，用于发送网络请求。
• URLSearchParams: 方便地解析和生成 URL 参数。
• AbortController: 用于取消正在进行的 Fetch 请求（防止后端渲染太慢，用户关闭页面后请求还在跑）。

4. 存储与性能 (Storage & Performance)

• localStorage / sessionStorage: 本地存储，可以存用户的预览偏好。
• IndexedDB: 浏览器数据库。如果你要做 PlantUML 后端渲染的离线缓存，这个比 localStorage 强得多。
• Web Workers: 在后台线程执行计算任务（比如前端编码解析非常大的图表，不卡住 UI 线程）。

5. 交互特效 (Advanced Interaction)

• Clipboard API: navigator.clipboard.writeText()。你的“点击复制代码”功能就需要它。
• Canvas API / SVG API: 用于绘图。PlantUML 渲染出来的图片本质上就是这些。
• Drag and Drop API: 原生的拖拽实现。

💡 学习建议

如果你在看代码时遇到看不懂的属性（比如 dataset、matches、contains），直接在 MDN 搜索框里输入。

进阶技巧：

在浏览器控制台（F12）里，随便选中一个元素，输入 console.dir($0)，可以看到这个 DOM 对象身上挂载的所有原生属性和方法，这比查文档更直观。

目前在做的 PlantUML 预览和引用功能，主要涉及 DOM 遍历 和 MutationObserver，可以重点研究这两个。可以针对某个 API 给你写具体用法示例。