DOM（全）

最新推荐文章于 2023-08-20 17:11:04 发布

孤影_ls

最新推荐文章于 2023-08-20 17:11:04 发布

阅读量2.4k

点赞数 5

分类专栏： JS 文章标签： JS初识DOM JS获取DOM方法 JS节点Node DOM映射机制 DOM的回流与重绘

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/103338891

版权

JS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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节点（node）

获取DOM的className

• 元素.calssList：当前元素的class名列表
• 元素.calssList.add(‘class名’)：增加指定的class名
• 元素.calssList.remove(‘class名’)：移除指定的class名
• 元素.replaceChild(newnode,oldnode)：replaceChild() 方法用新节点替换某个子节点。这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

获取DOM所有的元素

• let eles = document.getElementsByTagName("*");
• $("*"); // 获取所有的元素

DOM映射机制

DOM 映射：页面中的元素（标签）和js中的获取的DOM元素（元素对象）是一一关联的，当操作或移动JS的元素对象时，页面的标签元素也会跟着发生改变；这就是DOM映射的机制；

Dom的回流和重绘

dom的回流：单页面的dom产生变化（增加，删除，改变位置，改变大小）都会引发dom的回流，所谓回流：就是把dom重新排列进行渲染，他会非常消耗性能
- 创建一个文档碎片进行优化
- 模板字符串进行优化

重绘：当某一个dom元素的样式发生改变（比如改变dom的颜色），不会引起dom的回流，但是会重新绘制

  <div id="box"></div>
    <script>
        let box = document.getElementById('box');
        // console.time()
        // for (var i = 0; i < 10; i++) {
        //     var cur = document.createElement('li');
        //     cur.innerHTML = 111;
        //     box.appendChild(cur);
        // }
        // console.timeEnd()

        // console.time()
        //优化
        // 1.创建一个文档碎片
        let frg = document.createDocumentFragment(); // 创建一个文档碎片；//在js里装着的
        // 创建一个空容器，用来存储dom元素
        //console.log(frg)
        for (var i = 0; i < 10; i++) {
            var cur = document.createElement('li');
            cur.innerHTML = 111;
            frg.appendChild(cur)
        }
        console.log(frg)
        box.appendChild(frg); //添加节点，标签
        // console.timeEnd()
        let obj = {
            name: 'ls',
            age: 18,
            boyFriend: 'me'
        }
        
        //2.模板字符串
        let obj = {
            name: 'ls',
            age: 18,
            boyFriend: 'me'
        }
        let htmlStr = `
            <li>
             <span>${obj.name}</span> 
             <span>${obj.age}</span> 
             <span>${obj.boyFriend}</span>   
            </li>
        `
        box.innerHTML = htmlStr;//操作字符串
        // box.innerText = htmlStr
    </script>

回流（reflow）和重绘（repaint）

• 回流

当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

• 重绘

当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。

元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint。
在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation 的 opacity 元素，浏览器会将渲染层提升为合成层。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。

• 查看重绘方法