dom节点转成json数据

function dom2json() {
    const fn = (node) => {
        const obj = {
            tag: node.nodeName.toLowerCase(),
            attributes: [].reduce.call(node.attributes, (acc, cur) => {
                acc[cur.nodeName] = cur.value
                return acc
            }, {}),
            children: Array.from(node.childNodes).reduce((acc, cur) => {
                if (cur.nodeName === '#text') {
                    const context = cur.nodeValue.trim()
                    if (context) acc.push({
                        tag: 'text',
                        context: context
                    })
                } else acc.push(fn(cur))
                return acc
            }, [])
        }
        return obj
    }
    return fn(jsContainer)
}

function dom2json() {
    let div = document.getElementById('jsContainer');
    function solve(item) {
        let type = item.nodeType;
        if (type === 3) { //说明有可能是文本类型
            if (item.data.trim() === '')
                return null;
            else {
                return {
                    'tag': 'text',
                    'content': item.data.trim()
                }
            }
        } else {
            let now = {};
            now.tag = item.nodeName.toLowerCase();
            now.attributes = [...item.attributes].reduce((pre, now) => {
                pre[now.nodeName] = now.nodeValue;
                return pre;
            }, {})
            now.children = [...item.childNodes].reduce((pre, now) => {
                let result = solve(now);
                if (result) {
                    pre.push(result);
                }
                return pre;
            }, [])
            return now;
        }
    }
    return solve(div);
}

测试没问题的啊 自己会了就行了 爱过不过吧 淦

function dom2json() {
  const dom = document.getElementById('jsContainer');
  const fn = (node) => {
    if (node.nodeType === 3) {
      if (node.nodeValue.trim()) {
        // 文本
        return {
            tag: 'text',
            content: node.nodeValue.trim(),
        };
      }
      return null;
    }
    return {
      tag: node.tagName.toLowerCase(),
      attributes: Array.prototype.reduce.call(node.attributes, (acc, cur) => {
        acc[cur.nodeName] = cur.value;
        return acc;
      }, {}),
      children: node.childNodes.length > 0 ? Array.prototype.reduce.call(node.childNodes, (acc, cur) => {
        const item = fn(cur);
        if (item) {
          acc.push(item);
        }
        return acc;
      }, []) : undefined,
    };
  }
  return fn(dom);
}

function dom2json() {
      let jsContainer = document.querySelector("#jsContainer");
      function fn(el) {
        let res = {};
        res.tag = el.nodeName.replace(/\#/, "").toLowerCase();
        let attr = el.attributes;
        res.attributes = {};
        if (attr) {
            for(let i = 0; i < attr.length; i++){
                res.attributes[attr[i].nodeName] = attr[i].value
            }
        }
        if (el.childNodes) {
          res.children = [];
          for (let i = 0; i < el.childNodes.length; i++) {
            let data = {};
            let tagName = el.childNodes[i].nodeName
              .replace(/\#/, "")
              .toLowerCase();

            if (tagName == "text") {
              data.tag = tagName;
              let content = el.childNodes[i].nodeValue.trim();
              if (!content) continue;
              data.content = el.childNodes[i].nodeValue.trim();
            } else {
                data = fn(el.childNodes[i]);
            }
            if (JSON.stringify(data) != '{}') res.children.push(data);
          }
        }
        return res;
      }
      return fn(jsContainer);
    }

const dom2json = (dom) => {
  const tag = dom.tagName.toLowerCase();
  const attributes = {};
  const children = [];
  const attrs = dom.attributes;
  for (let i = 0; i < attrs.length; i++) {
    const attr = attrs[i];
    attributes[attr.nodeName] = attr.nodeValue;
  }
  const childNodes = dom.childNodes;
  if (childNodes && childNodes.length) {
    for (let i = 0; i < childNodes.length; i++) {
      const child = childNodes[i];
      if (child.nodeType === 1) {
        children.push(dom2json(child));
      } else if (child.nodeType === 3) {
        const content = child.nodeValue.trim();
        if (content) {
          children.push({
            tag: "text",
            content,
          });
        }
      }
    }
  }
  return {
    tag,
    attributes,
    children,
  };
};

     const getAttr = (node) => {
        const attribute = {};
        if (node.attributes?.length && node.nodeType === 1) {
          const attributes = { ...node.attributes };

          for (const key in attributes) {
            let k = attributes[key].nodeName;
            let v = attributes[key].nodeValue;
            Object.assign(attribute, { [k]: v });
          }
          return attribute;
        } else {
          return null;
        }
      };
      function dom2json(node) {
        node.obj = {};
        const { obj } = node;
        if (node.nodeType === 1) {
          // 非文本节点
          obj.tag = node.tagName.toLowerCase();
        }
        if (node.nodeType === 3 && node.data.trim() !== "") {
          // 文本节点
          obj.tag = "text";
          obj.content = node.data.trim();
        }

        if (getAttr(node)) {
          obj.attributes = getAttr(node);
        }

        const newArrNode = Array.from(node.childNodes).filter(
          (cnode) =>
            cnode.nodeType === 1 ||
            (cnode.nodeType === 3 && cnode.data.trim() !== "")
        );

        if (node.childNodes && newArrNode.length) {
          obj.children = [];
          // 符合情况的子节点
          newArrNode.forEach((cnode) => {
            obj.children.push(dom2json(cnode));
          });
        }

        return obj;
      }
      let p = dom2json(document.querySelector("#jsContainer"));
      console.log(JSON.stringify(p));

function dom2json(dom) {
    if(!dom) dom=document.querySelector('#jsContainer')
    let model
    if (dom.nodeType == 1) {
        model={tag:'',attributes:{},children:[]}
        model.tag = dom.localName
        let len = dom.attributes.length
        if(len){
            for (let i = 0; i < len; i++) {
                let key=dom.attributes.item(i).nodeName
                model.attributes[key]= dom.getAttribute(key)
            }
        }
        let cLen = dom.childNodes.length
        if (cLen) {
            for (let i = 0; i < cLen; i++) {
                if(dom2json(dom.childNodes[i])){
                    model.children.push(dom2json(dom.childNodes[i]))
                }
            }
        }
    } else if (dom.nodeType == 3) {
        let text = dom.textContent.trim()
        if (text) model={tag:'text',content:text}
    }
    return model
}
let result=dom2json()

function dom2json() {
            let res = function process(ele, obj = {}) {
                if (ele.nodeType == 3) {
                    if (ele.nodeValue.trim() != '') {
                        obj['tag'] = 'text'
                        obj['content'] = ele.nodeValue.trim()
                        return obj
                    } else {
                        return
                    }
                }
                obj['tag'] = ele.tagName.toLowerCase()
                obj['attributes'] = {}
                if (ele.className) {
                    obj['attributes']['class'] = ele.className
                }
                if (ele.id) {
                    obj['attributes']['id'] = ele.id
                }
                if (ele.getAttribute('style')) {
                    obj['attributes']['style'] = ele.getAttribute('style')
                }
                let data = ele.dataset
                Object.keys(data).forEach((key) => {
                    obj['attributes']['data-' + key] = data[key]
                })
                obj['children'] = []
                let childrenNodes = ele.childNodes
                for (let i = 0; i < childrenNodes.length; i++) {
                    if (childrenNodes[i].nodeType != 2) {
                        let child = process(childrenNodes[i])
                        if (child) {
                            obj['children'].push(child)
                        }
                    }
                }
                return obj
            }
            return JSON.stringify(res(jsContainer))
        }

谁能告诉我我错哪了

        function dom2json() {
            let container = document.querySelector('#jsContainer')
            return getDomData(container)   
        }

        function getDomData(node) {
            let nodeType = node.nodeType
            let obj = {}
            if(nodeType === 1 || nodeType === 3 && node.textContent.trim().length > 0) {
                let attributes = {}, children = []
                if(nodeType === 3) {
                    obj.tag = 'text'
                    obj.content = node.textContent.trim()
                }

                if(nodeType === 1) {
                    obj.tag = node.nodeName.toLowerCase()
                    Array.prototype.forEach.call(node.attributes, item => {
                        attributes[item.name] = item.value
                    })
                    obj.attributes = attributes
                }
            
                Array.prototype.forEach.call(node.childNodes, child => {
                    getDomData(child) && children.push(getDomData(child))
                })

                obj.children = children
                return obj
            }
        }

function dom2json() {
    var container = document.getElementById('jsContainer');
    var obj = {
        tag: container.nodeName.toLowerCase(),
        attributes: getAtr(container),
        children: getChild(container)
    };
    
    console.log(JSON.parse(JSON.stringify(obj)));
    return obj;
    //获取所有子元素
    function getChild(ele){
        //只包含 nodeType 为1(element)和3(text)的节点
        //判断是否有子元素
        if(!ele.hasChildNodes()){
            return [];
        }else{
            var arr = []; 
            Array.from(ele.childNodes).forEach(item=>{
                if(item.nodeType==3){
                    if(item.textContent.trim()!=''){
                        arr.push({
                            tag:'text',
                            content:item.nodeValue.trim()
                        })
                    }
                }else{
                    arr.push({
                        tag: item.nodeName.toLowerCase(),
                        attributes: getAtr(item),
                        children: getChild(item)
                    })
                }
            })
            return arr;
        }
    }
    
    // 获取元素所有属性
    function getAtr(ele){
        var attrs = {};
        if(ele.attributes.length!=0){
            Array.from(ele.attributes).forEach(item=>{
                attrs[item.name]=item.value;
            })
        }
        return attrs;
    }
}

浏览器没问题，真机过不去

function dom2json(node = document.querySelector('#jsContainer'), json = {}) {
    if (node.nodeType == '3') {
        json.tagName = 'text'
        json.content = node.textContent
        return json
    }

    json.tagName = node.tagName
    json.attributes = {}
    json.children = []
    const attributes = node.attributes
    Array.from(attributes).forEach(attr => {
        json.attributes[attr.localName] = attr.value
    })

    if (Array.from(node.childNodes).length) {
        json.children = []
        Array.from(node.childNodes).forEach(child => {
            json.children.push(dom2json(child))
        })
    }

    return json
}

测试编译器无法通过 map() 函数，所以在dom.attributes获取属性时，要通过for循环来赋值；
测试编译器无法直接获取 dom.childNodes，需要通过Array.from() 转换成数组之后再进行遍历操作。

function dom2json() {
  const A = document.querySelector('#jsContainer')
  function process(dom) {
    let obj = {}
    // 获取所有节点标签 ==> nodeName
    obj.tag = dom.nodeName.toLowerCase().replace('#', '')
    // 文本text节点
    if (dom.nodeType === 3) {
      if (!dom.textContent.trim()) return
      obj.content = dom.nodeValue.trim()
    }
    if (dom.nodeType === 1) {
      obj.attributes = {}
      obj.children = []
      for (let i = 0; i < dom.attributes.length; i++) {
        obj.attributes[dom.attributes[i].name] = dom.attributes[i].value
      }
      Array.from(dom.childNodes).forEach(item => {
        if (!process(item)) return
        obj.children.push(process(item))
      })
    }
    return obj
  }
  return process(A)
}