使用js将dom对象转换为js对象

// 获取元素的属性，输出对象，如果没有属性输出null
    const getAttribute = (dom) => {
        let attributes = {};
        let empty = true;
        Array.from(dom.attributes).map(item => {
            attributes[item.nodeName] = item.nodeValue;
            empty = false;
        })
        return empty ? null : attributes;
    }

    // 将dom转为js-dom
    const domTrans = (dom) => {
        // 总dom树
        let tree = [];

        // 递归, node = 当前的节点，dataNode = 数据插入的节点
        const loop = (node, dataNode) => {
            // 当前节点的模板
            let temp = {
                type: node.nodeType
            }

            // 如果是文本节点 或 单标签节点
            if (temp.type == 3 && node.nodeValue.match(/\S/)) {
                temp['content'] = node.nodeValue;
                temp['tag'] = node.nodeName;
                dataNode.push(temp);
            }

            // 元素节点
            if (temp.type == 1) {
                let attributes = getAttribute(node);

                // 如果没有属性，不添加 attributes
                if (attributes) temp['attributes'] = attributes;

                // 当前节点下只有文本 或 单标签节点
                if (node.childNodes.length <= 1) {
                    temp['content'] = node.innerHTML;
                    temp['tag'] = node.nodeName.toLowerCase();
                }

                // 当前节点下还有子节点
                if (node.childNodes.length > 1) {
                    temp['children'] = [];
                    temp['tag'] = node.nodeName.toLowerCase();
                    for (let i = 0; i < node.childNodes.length; i++) {
                        loop(node.childNodes[i], temp.children);
                    }
                }
                dataNode.push(temp);
            }

        }
        loop(dom, tree);
        return tree[0].children;
    }

    console.log(
        domTrans(document.querySelector('#app'))
    )