jQuery .detach() + createDocumentFragment的使用

fengyehongWorld

于 2022-06-30 07:16:33 发布

阅读量177

点赞数

分类专栏： # JS 文章标签： detach() DOM操作性能优化事件绑定 JavaScript

本文链接：https://blog.csdn.net/feyehong/article/details/125532917

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

一. detach()介绍

⏹detach()方法移除被选元素,包括所有的文本和子节点,
但是会保留数据和事件.

⏹如果你要对一个DOM元素进行大量处理,
应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档.

二. 具体案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 500px;
        }
        td {
            text-align: center;
        }
    </style>
    <title>减少DOM改动的.detach()方法</title>
</head>
<body>
    <button id="btn">使用.detach()方法向表格中插入数据</button><br>
    <hr>

    <table id="table">
        <colgroup>
            <col width="25%">
            <col width="25%">
            <col width="25%">
            <col width="25%">
        </colgroup>
        <thead>
            <tr>
                <th>开始</th>
                <th>结束</th>
                <th>可预约数</th>
                <th>已预约数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-key="time">10:00</td>
                <td>11:00</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>12:00</td>
                <td>13:00</td>
                <td>45</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
	
	<!-- 存放待拷贝元素的模板 -->
    <template id="template1">
        <tr>
            <td>98:00</td>
            <td>99:00</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </template>
</body>
<script src="./js/jquery.min.js"></script>
</html>

/*
    元素被detach()方法移除,处理之后又添加到table中
    原先的事件依然处于被绑定的状态
*/
$("[data-key='time']").click(() => {
    console.log('表格中的点击事件被触发了!');
});

// 使用.detach()方法向表格中插入数据
$("#btn1").click(() => {

    console.time('programStart');

    /*
        ⏹detach()方法移除被选元素,包括所有的文本和子节点,
        但是会保留数据和事件.

        ⏹如果你要对一个DOM元素进行大量处理,
        应该先用.detach()方法,把这个元素从DOM中取出来,处理完毕以后,再重新插回文档.
    */ 
    const tbodyDOM = $("#table > tbody").detach();

    // 给属性data-key的元素添加id
    $(tbodyDOM).find('[data-key="time"]').prop("id", "jmw");

    // 获取模板对象
    const template = document.querySelector("#template1");
    
    // ⏹创建文档片段对象
    const documentFragment = document.createDocumentFragment();
    Array.from({length: 5}).forEach(() => documentFragment.appendChild(
        // ⏹将模板中的节点原封不到的添加到文档片段中
        document.importNode(template.content, true)
    ));

    let tempNode = null;
    for (const index of Array.from({length: 5}).keys()) {
        // ⏹获取模板中的节点
        tempNode = document.importNode(template.content, true);
        // ⏹使用jQuery包装模板中的节点,修改节点中的内容
        $(tempNode).find("td").text(index);
        // ⏹添加到文档片段中
        documentFragment.appendChild(tempNode);
    }

    // 😉将文档片段添加到.detach()处理之后的tbodyDOM中
    tbodyDOM.append(documentFragment);
    // 将tbody添加到表格中
    $("#table").append(tbodyDOM);

    console.timeEnd('programStart');
});