DocumentFragment

1. DocumentFragment

DocumentFragment 인터페이스는 부모가 없는 아주 작고 경량화된 document 객체이다. DocumentFragment에 문서 구조의 일부를 저장하여 사용한다. document와 다른 점은 활성화된 문서 트리 구조의 일부가 아니기 때문에 DocumentFragment를 변경해도 문서에는 영향을 미치지 않으며 성능에도 영향이 없다. template 태그의 HTMLTemplateElement.content 속성에도 DocumentFragment가 포함되어 있다.

 

 

2. DocumentFragment 속성과 메소드

DocumentFragment는 부모인 Node와 ParentNode의 속성과 메소드를 상속받고있다. 따라서 children, querySelector(), querySelectorAll() 등을 접근할 수 있다.

 

 

3. DocumentFragment 사용 예시

DocumentFragment는 다음과 같이 사용한다.

 

See the Pen documentFragment by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

 

---

참고자료

www.youtube.com/watch?v=aUzCq-uabhw

developer.mozilla.org/ko/docs/Web/API/DocumentFragment