JS DocumentFragment

documentFragment

DocumentFragment 메모리상에만 존재하는 경량화된 DOM 이다

1. DocumentFragment 를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가됩니다.

2. DocumentFragment 를 DOM 에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리상에 존재하지 않습니다.

주의사항

DocumentFragment 를 appendChild 와 같은 함수로 DOM 에 추가하고 난 후 DocumentFragment 의 자식노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않습니다. 만약 이를 유지 시키고 싶다면 cloneNode 를 통해 복제하는 방법이 있습니다.

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

<script>
    const frag = document.createDocumentFragment();

    for (let i = 0; i < 100; i++) {
        const el = document.createElement("div");
        frag.appendChild(el);
    }

    const cont = document.querySelectorAll(".container");
    console.log(frag.baseURI)
    for (let i = 0; i < cont.length; i++) {
        cont[i].appendChild(frag.cloneNode(true));
    }
</script>

참고

https://www.inflearn.com/course/%EC%BD%94%EB%94%A9%EC%9D%B8%ED%84%B0%EB%B7%B0-js-%EC%96%91%EC%84%B1%ED%95%99%EA%B5%90