JavaScript中无法直接将DOM节点导出为JSON，需手动提取标签名、属性、文本等内容构造可序列化对象后再转换；示例函数elementToJSON递归处理元素节点并过滤内置属性，支持生成结构化JSON字符串。
JavaScript 中无法直接“把节点内容导出为 JSON”，因为 DOM 节点本身是浏览器对象，不能被 JSON.stringify() 序列化。但你可以提取节点的结构、属性、文本等内容，构造成普通 JavaScript 对象，再转成 JSON 字符串。
提取常见节点信息并构造可序列化对象
例如，对一个 HTML 元素（如 <div id="user" data-role="admin">张三</div>），可手动提取关键字段：
-
标签名：用
node.tagName.toLowerCase() -
ID 和 class：用
node.id、node.className -
自定义属性：用
node.dataset或node.getAttributeNames().reduce(...) -
文本内容：用
node.textContent（不含 HTML）或node.innerHTML（含 HTML，注意 XSS 风险） -
子元素：递归处理
node.children，避免遍历childNodes（含文本/注释节点）
简单示例：将单个元素转为 JSON
以下函数只处理元素节点，忽略 script/style 等特殊标签：
function elementToJSON(node) {
if (!node || node.nodeType !== Node.ELEMENT_NODE) return null;
const obj = {
tag: node.tagName.toLowerCase(),
id: node.id || undefined,
className: node.className || undefined,
text: node.textContent.trim() || undefined,
html: node.children.length === 0 ? node.innerHTML.trim() : undefined,
attributes: {}
};
// 提取所有属性（排除内置属性）
for (const attr of node.getAttributeNames()) {
if (!['id', 'class', 'style'].includes(attr)) {
obj.attributes[attr] = node.getAttribute(attr);
}
}
// 递归处理子元素
if (node.children.length > 0) {
obj.children = Array.from(node.children).map(child => elementToJSON(child));
}
return obj;
}
// 使用
const div = document.getElementById('user');
const jsonStr = JSON.stringify(elementToJSON(div), null, 2);
console.log(jsonStr);
导出整个区域（如表单、卡片）的结构化数据
若目标是收集用户输入或结构化内容，推荐按语义提取，而非照搬 DOM 树。例如表单导出：
立即学习“Java免费学习笔记（深入）”；
- 遍历
form.elements，读取name和value - 对复选框/多选下拉框，用
Array.from(...).filter(...).map(...)收集选中值 - 忽略禁用（
disabled）和无name的字段 - 结果对象直接
JSON.stringify()即可，无需额外包装
注意事项
- DOM 节点含循环引用（如
parentNode、ownerDocument），直接传给JSON.stringify()会报错 - 避免使用
innerHTML存储敏感内容，导出后若用于服务端渲染需二次转义 - 若需保留事件或方法，JSON 不适用——它只保存纯数据，函数和原型链都会丢失
- 深层嵌套节点建议加递归深度限制，防止栈溢出
