方法一：
使用DOM.setAttribute("class","类名")
方法二：
DOM.classList.add("类名")
方法一给DOM元素添加类名会覆盖原有的类名
方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有浏览器都支持此方法。
概念：把要插入的节点添加到指定父级里面的指定节点之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
效果
注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。
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树上，视图就更新了。
1. document.createElement(tagname)
2. document.createTextNode(data)
3.document.createDocumentFragment()
1. Node.parentNode
2. Node.parentElement
3. Node.childNodes
4. Node.children
5. Node.nextSibling
6.Node.nextElementSibling
7. Node.previousSibling
8.Node.previousElementSibling
9.Node.firstChild
10. Node.firstElementChild
11. Node.lastChild
12. Node.lastElementChild
1. Node.appendChild()
2. Node.removeChild()
3. Node.insertBefore()
4. Node.replaceChild()
1. element.setAttribute(name /*属性名*/, value /*属性值*/)
2. element.removeAttribute(attrName /*要删除的属性名*/)
3. element.getAttribute(attrName)
4. element.hasAttribute(attrName)
