js dom 转 js 对象
递归和一些dom -> node 对象的基板操作，dom -> node对象参考手册：MDN DOM
// 获取元素的属性，输出对象，如果没有属性输出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')
)
)