DOM

元素也是对象

• 在html中叫做标签，在js中叫做元素；JS中的元素都是对象数据类型的
• style：操作的是元素的行内样式
• ClassName：操作的是元素的class名
• innerHTML：操作的是元素的内容（可以识别标签）
• innerText：操作的是元素的内容（不可以识别标签）

        //1.要想操作谁，就要先获取谁；
        //1. document.getElementById
        //document:上下文本
        //get : 获取
        //Element： 元素
        //By ：通过
        //Id ：id名
        // let div1 = document.getElementById("box");
        // console.dir(div1);
        // div1.onclick=function(){
        //     //这里面代码不运行；当点击元素的时候，这个函数就会执行；
        //     //console.log(200);
        //     if(div1.style.background==="black"){
        //         div1.style.background="red"
        //     }else{
        //         div1.style.background = "black";
        //     }
        // console.log(div1.style.background);
//{style:{background:"red"}}



        // }
        

JS中获取DOM的方法

JS中获取DOM的方法

JS节点（node）

JS节点（node）

DOM映射机制

• 页面中的标签和js中的获取的DOM元素是一一关联的，如果你把标签的内容改了，那js中的dom元素也跟着变
  

Dom的回流和重绘

• dom的回流：单页面的dom产生变化（增加，删除，改变位置，改变大小）都会引发dom的回流，所谓回流：就是把dom重新排列进行渲染，他会非常消耗性能
  • 创建一个文档碎片进行优化
  • 模板字符串进行优化
• 重绘：当某一个dom元素的样式发生改变（比如改变dom的颜色），不会引起dom的回流，但是会重新绘制