Document.getElementsByTagName返回HTMLCollection，仅支持.length和索引访问，不支持.map()等数组方法；统计需先转数组或改用querySelectorAll，注意作用域、动态DOM及编辑器结构。
Document.getElementsByTagName 返回的是 HTMLCollection，不是数组
直接对 Document.getElementsByTagName 的返回值调用 .length 就能得到总数，但很多人误以为它是个数组，尝试用 .map() 或 .filter() 会报错：TypeError: HTMLCollection is not a function。它其实是类数组对象，只支持 .length 和按索引访问（collection[0]），不支持数组方法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统计数量：直接用
document.getElementsByTagName('div').length - 想进一步筛选（比如只统计 class 包含 "editor-block" 的
p标签）：必须先转成数组，例如[...document.getElementsByTagName('p')].filter(el => el.classList.contains('editor-block')).length - 注意作用域：如果编辑器内容在
iframe或 shadow DOM 中，document指向的是主页面，需换成对应上下文的contentDocument或shadowRoot
编辑器内容常不在主 document.body 下
很多富文本编辑器（如 TinyMCE、Quill、draft-js）把编辑区域封装在 iframe 或通过 contenteditable div 动态生成内容，此时直接在主页面执行 document.getElementsByTagName 会漏掉真实编辑内容里的标签。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 查 iframe：先定位编辑器容器中的
iframe元素，再取其contentDocument，例如editorIframe.contentDocument.getElementsByTagName('span').length - 查 contenteditable 区域：若编辑器是普通
div[contenteditable="true"]，应在其节点上调用querySelectorAll更可靠（见下一条），因为getElementsByTagName只能在文档或元素节点上执行，且不支持作用域限制 - 避免硬编码选择器：编辑器可能动态插入 wrapper、placeholder、decorator 等非用户内容，统计前最好确认目标标签是否都属于用户输入部分（比如排除
data-placeholder="true"的元素）
getElementsByTagName 不支持 CSS 选择器，遇到嵌套或条件统计要换方案
getElementsByTagName 只能按标签名匹配，无法过滤属性、class、嵌套层级。比如“统计编辑器里所有 code 标签，但排除被 pre 包裹的”，它完全做不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
querySelectorAll替代：例如editorContainer.querySelectorAll('code:not(pre code)').length - 性能差异不大：现代浏览器中
querySelectorAll对简单选择器（如'p'）和getElementsByTagName性能接近，且更灵活 - 注意返回值类型：两者都返回“实时”集合（
HTMLCollection）或静态 NodeList（querySelectorAll返回的是静态 NodeList，不会随 DOM 变动自动更新）
动态编辑场景下统计结果可能立即失效
用户每敲一个字、粘贴一段 HTML、撤销一次操作，DOM 都可能变化。用 getElementsByTagName 获取的 .length 是快照值，不自动刷新。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要缓存统计结果：除非明确知道内容已锁定（如导出前校验），否则每次需要时重新计算
- 监听变化：对
contenteditable区域可监听input或DOMSubtreeModified（后者已废弃，推荐用MutationObserver） - 避免高频重算：比如在
input事件里直接调用统计，可能每秒触发数十次；可加防抖（setTimeout+ 清除）或只在关键动作（如 blur、submit）时统计
document、iframe.contentDocument 还是某个特定容器元素；统计逻辑本身很简单，难的是判断“到底该统计哪一块”。 
