DocumentFragment

MDN DocumentFragment 설명

DocumentFragment 인터페이스는 아주 작고 부모를 갖지 않는 문서 객체를 나타냅니다.
DocumentFragment는 일반 문서처럼 노드로 구성된 문서 구조를 저장할 수 있으므로 Document의 가벼운 버전으로 사용됩니다. Document와의 중요한 차이점으로, DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 내부의 트리를 변경해도 문서나 성능에 아무 영향도 주지 않으며 리플로우도 방지할 수 있습니다.

 

* 리플로우 : 브라우저가 웹 페이지의 위치와 기하학적 구조를 다시 계산

* 리페인트 : 브라우저가 웹 페이지를 다시 그려 결과적인 시각적 갱신

 

간단하게 엘리먼트를 백업/복원할 때 사용할 수 있고 그 외에 다른 사용방법이 있을지는 확인이 필요함

//백업버튼 생성하여 클릭시 호출
function onBackupButtonClick(e)
{
	//백업용 엘리먼트를 찾아서 DocumentFragment 에 넣는다.
	const element = document.getElementById('backup');
	element.beforeParentEle = element.parentElement;
	const fragment = new DocumentFragment();
	fragment.append(element);
    
	window.backupFragment = fragment;
}

//복원버튼 생성하여 클릭시 호출
function onRestoreButtonClick(e)
{
	const element = window.backupFragment.children[0];
	if(element.beforeParentEle) element.beforeParentEle.append(elemenet);
	else document.body.append();
    
	delete element.beforeParentEle;
	//element.beforeParentEle = null;
}