js操作dom节点和样式

起因

用的三方ui库树菜单，需要动态加入dom节点和样式

方法步骤

1. 原生操作html节点

// 1. 
document.querySelector() // 获取单个节点
// 2. 
document.querySelectorAll() // 获取节点的集合（返回值为Array）
// 3.
document.createElement() // 创建新节点
// 4. 
获取的节点.insertBefore( 参数一，参数二 )
/**
 * 获取的节点：参数二的父节点
 * 参数一： 要插入的是谁
 * 参数二：要在谁之前插入
 
 // js批量操作style
 // 1. 使用dom.style.cssText = `
     width:10px;
     color:red;
 `
 // 2. css类名
 // 步骤一
 <style>
     .className {样式}
 </style>
 // 步骤二
 dom.classList.add('className')
 
 // 3. dom.style:
 dom.style = {
    ...dom.style,
    color:'red';
    width:'10px';
}

// 4. 封装函数遍历style对象，传参就是style具体对象。
function(style){
    for( let key in style ){
        this.$set(this.style,key,style[key])
    }
}