JavaScript 中怎么把节点内容导出为 JSON 数据格式-js教程-PHP中文网

javascript中无法直接将dom节点导出为json，需手动提取标签名、属性、文本等内容构造可序列化对象后再转换；示例函数elementtojson递归处理元素节点并过滤内置属性，支持生成结构化json字符串。

javascript 中怎么把节点内容导出为 json 数据格式

JavaScript 中无法直接“把节点内容导出为 JSON”，因为 DOM 节点本身是浏览器对象，不能被 JSON.stringify() 序列化。但你可以提取节点的结构、属性、文本等内容，构造成普通 JavaScript 对象，再转成 JSON 字符串。

提取常见节点信息并构造可序列化对象

例如，对一个 HTML 元素（如 <div id="user" data-role="admin">张三</div>），可手动提取关键字段：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

标签名：用 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);