前言DOM常挂在嘴边，但我们了解吗？带着这个问题我开始了CSS是如何工作的？但是当浏览器显示文档时，它必须将文档的内容与其样式信息结合起来。文档分两个阶段进行处理：浏览器将HTML和CSS转换为DOM（文档对象模型）。DOM表示计算机内存中的文档。它将文档内容与其样式相结合。浏览器显示DOM的内容。关于DOMDOM是一个树形结构。标记语言中的每个元素、属性和文本片段都成为一个DOM节点。这些节点由它们与其他DOM节点的关系定义。如何操作DOM由于HTML和CSS被转化为DOM树，要改变HTML的结构，就需要通过javascript来操作DOM。操作一个DOM节点有以下操作：更新：更新该节点代表的HTML内容遍历：遍历该节点下的子节点，然后按需添加：在DOM节点下动态添加一个HTML子节点删除：把这个节点从HTML中删除，删除的内容包括几个点的内容及其子节点的内容。操作代码1.获取节点vartest=document.getElementById('test');vartr=document.getElementsByTagName('tr');//返回DOM数组vartest_tr=test.getElementsByTagName('tr');//ReturnDOM数组varclass_tr=document.getElementsByClassName('tr_class');//返回DOM数组vartest_parent=test.parentElement;vartest_parent=test.parentNode;varnext_el=test.nextElementSibling;varprevious_el=test.previousElementSibling;vartest_child=test.children;vartest_first_child=test.firstElementChild;vartest_last_child=test.lastElementChild;//新方法低版本IE<8不支持vartest=document.querySelector('#test');vartr=document.querySelectorAll('#testtr');//返回DOM数组2，创建节点varel=document.createElement('div');//tagvarnode_txt=document.createTextNode('hellworld');//HTML属性3、DOM变化//添加、删除子元素test.appendChild(el);test.removeChild(el);//替换子元素元素测试。replaceChild(el1,el2);//插入子元素varel3=document.createElement('p');test.insertBefore(el3,el);4.属性操作//获取一个{name,value}的数组varattrs=test.attributes;//获取和设置属性varclassName=test.getAttribute('class');test.setAttribute('class','test_class');//判断和移除属性test.hasAttribute('class');test.removeAttribute('class');//是否有属性设置test.hasAttributes();思考vue.js、handlebar.js、react.js等，DOM操作的本质是什么？有什么不同？哪个更快，性能更好，为什么？
