document.createDocumentFragment() 는 새로운 빈 DocumentFragment를 생성합니다.
DocumentFragments는 DOM 노드들입니다. 이들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 사용법은 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고, 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.
DocumentFragment란?
DocumentFragment 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. Document의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다. 중요한 차이점은 DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지않으며 성능에도 영향이 없다는 점입니다.
DocumentFragment 노드를 생성해서 사용하면 라이브 Dom 트리 외부에 경량화된 문서 DOM을 만들수 있습니다. DocumentFragment는 마치 라이브 DOM 트리처럼 동작하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면됩니다.
일반 엘리먼트와 비교해서 좋은점
- DocumentFragment 는 어떤 종류의 노드를 가질수 있는 반면(<body>나 <html>을 제외) element는 그렇지 않습니다.
- DocumentFragment 는 DOM에 추가하더라도, DocumentFrament 자체는 추가되지 않으며, 노드의 내용만이 추가됩니다.
- DocumentFragment를 DOM에 추가할때, DocumentFragment는 추가되는 위치로 이전되며, 생성한 메모리상의 위치에 더 이상 존재하지 않습니다. 노드를 포함하기 위해 일시적으로 사용된 후 라이브 DOM으로 이동되는 element노드는 그렇지 않습니다.
너무어렵다...😇
반응형
'DOM > 기초' 카테고리의 다른 글
| 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? (0) | 2021.06.29 |
|---|---|
| DOM - 차이점 비교 (0) | 2021.06.29 |
| DOM과 자바스크립트 (0) | 2021.06.29 |
| 이벤트 (Events) (0) | 2021.06.16 |
| DOM(Document Object Model) (0) | 2021.06.02 |