一、创建节点
createElement
createTextNode
二、添加、删除、替换、克隆元素
1、appendChild
2、insertBefore
3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动
4、删除节点removeremoveChild
remove()
removeChild
5.替换节点
replaceChild
6、克隆节点
cloneNode()
三、操作元素属性的方法
1.获取属性 元素.属性名
2.设置属性 元素.属性名 = 属性值
1、2方法只能获取和设置元素自带的属性
3.操作属性的万能方法
getAttribute()
setAttribute()
js原生是有虚拟dom地，构建出js虚拟DOM树的代码是：
// 构造虚拟DOM对象类function Element(tagName, props, children){this.tagName=tagName
this.props = props。
this.children = children}// 创建虚拟DOMfunction createElement(tagName, props, children) {
return new Element(tagName, props, children)}// <ul class="ul-wrap">// 。
<li class="li-item">1</li>// <li class="li-item">2</li>// <li class="li-item">3</li>//。
</ul>// 假设我们有如上的DOM结构, 那我我们就可以利用虚拟DOM模拟出一个类似的DOM树结构。
let VDOM = createElement("ul", {class: "ul-wrap",}, [createElement("li", {class: "li-item"
}, ["1"]), createElement("li", {class: "li-item"}, ["2"])。
createElement("li", { class: "li-item"}, ["3"]),])console.dir(JSON.stringify(VDOM,null,2))。
我们可以在控制在中打印出打印的虚拟DOM为以下结构。
使用virtual DOM算法的步骤是：
1、用原生JavaScript对象结构模拟出DOM树结构，利用这个树构建一个真正的DOM树，并渲染到页面中。
2、当状态变更时，重新构建一个新的虚拟DOM树，然后用新的树和旧的树进行对比，记录并保存出两棵树的差异。
3、当步骤二记录的差异应用到步骤一中所构建的真正的DOM树上，视图就更新了。
方法一：使用原生js操作dom的方法，来改变css的样式，比如
document.getElementById(id).style.property =newstyle
这里的new style 里面就可以使用js传入的变量。
此方法固然可以，但是对应改变一些复杂的css，比如动画什么的，操作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！
方法二：
利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！
