本文介绍在浏览器开发者工具中，如何一键获取并复制所有匹配指定 class 名的 dom 元素的完整 html 字符串（而非 javascript 对象），便于快速粘贴到编辑器中分析结构。

本文介绍在浏览器开发者工具中，如何一键获取并复制所有匹配指定 class 名的 dom 元素的完整 html 字符串（而非 javascript 对象），便于快速粘贴到编辑器中分析结构。

document.getElementsByClassName("some_class_name") 返回的是一个 HTMLCollection（类数组对象），它本身不可直接字符串化或复制，且不支持 map() 等数组方法。因此，需先将其转换为真正的数组，再逐个提取 .innerHTML（注意：.innerHTML 获取的是元素内部 HTML，不含外层标签；若需包含外层标签，请改用 .outerHTML）。

✅ 正确做法如下（推荐一行执行）：

copy([...document.getElementsByClassName("some_class_name")].map(el => el.outerHTML).join("\n"));

• ... 展开语法将 HTMLCollection 转为数组；
• .map(el => el.outerHTML) 获取每个元素的完整 HTML（含起始与结束标签），例如 <div class="red_car">car1</div>；
• .join("\n") 以换行分隔，确保粘贴后结构清晰、可读性强；
• copy() 是 DevTools 提供的内置函数，可直接将字符串写入系统剪贴板。

⚠️ 注意事项：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 若目标元素为空（如 <div class="some_class_name"></div>），.outerHTML 仍会正确输出其闭合结构；
• 若需仅获取文本内容（不含 HTML 标签），可替换为 el.textContent；
• 若页面存在大量匹配元素，建议先确认数量（如 console.log(document.getElementsByClassName("some_class_name").length)），避免意外卡顿；
• copy() 仅在浏览器 DevTools 控制台中可用，不适用于普通网页脚本（需配合 navigator.clipboard.writeText() 并处理权限）。

执行后，直接在代码编辑器中 Ctrl+V（Windows/Linux）或 Cmd+V（macOS）即可获得格式规整的 HTML 片段列表，大幅提升前端调试与模板分析效率。

立即学习“前端免费学习笔记（深入）”；