[Javascript] documentFragment

SOLEE_DEV·2021년 8월 16일
0

Javascript

목록 보기
17/19

처음 JS로 돔을 만들고, 추가하는 방법?

document.createElement()로 생성한 뒤, appendChild()를 이용해 바로 DOM에 등록!

보통 DOM 요소를 만드는 방법

<body>
  	<script>
    for(let i=0; i<10; i++) {
      let divEl = document.createElement('div');
      divEl.innerText = 'hello' + i;
      document.body.appendChild(divEl);
      // body 태그에 만든 div요소를 바로 붙여넣음
    }
	</script>
</body>

이 때, DocumentFragment 노드를 사용하면, 오직 메모리상에만 존재하는 경량화된 DOM을 만들 수 있다!

<body>
  	<script>
  	const docFrag = document.createDocumentFragment();
	// const test = document.createElement('div');
  
    for(let i=0; i<10; i++) {
      let divEl = document.createElement('div');
      divEl.innerText = 'hello' + i;
      docFrag.appendChild(divEl);
      // test.appendChild(divEl);
    }

	console.log(docFrag.childNodes); // 자식 요소들 출력
	document.body.appendChild(docFrag);
	// => 별 다른 부모 요소없이 원하는 자식 요소들만 dom에 추가할 수 있게 됨!
	console.log(docFrag.childNodes); // 자식 요소 X

	// document.body.appendChild(test); 
	// => 요렇게 해버리면 아무 의미없는 부모 요소가 생성되게 됨!
	</script>
</body>

DocumentFragment의 특징!

  1. DocumentFragment를 DOM노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고, 그 자식 노드들만 추가
  2. DocumentFragment를 DOM에 추가하면 DocumentFragment 노드의 자식 요소들은 더 이상 메모리에 존재하지 않음
    -> 자동으로 메모리에서 삭제됨!

=> 이러한 특징 때문에 요소를 여러개의 각기 다른 부모 요소에 집어 넣을 때 더욱 깔끔한 코딩이 가능함!

<body>
  	<div class="container"/>
  	<div class="container"/>
  	<div class="container"/>
  	<script>
    	let elements = [];

		for(let i=0; i<100; i++) {
          conse el = document.createElement('div');
          elements.push(el);
        }

		const cont = document.querySelectorAll(".container");

		for(let i=0; i<cont.length; i++) {
          	for(let j=0; j<elements.length; j++) {
              	cont[i].appendChild(elements[j].cloneNode(true));
             	// 이렇게 할시, 배열은 참조 타입이기 때문에 el 자체를 복사할 수 있게끔
            }
        }
	</script>
</body>
<body>
  	<div class="container"/>
  	<div class="container"/>
  	<div class="container"/>
  	<script>
      	const frag = document.createDocumentFragment();

    	let elements = [];

		for(let i=0; i<100; i++) {
          conse el = document.createElement('div');
          elements.push(el);
          frag.appendChild(el);
        }

		const cont = document.querySelectorAll(".container");

		for(let i=0; i<cont.length; i++) {
          	cont[i].appendChild(frag.cloneNode(true));
          	// 한번에 뽝 자식 생성!
        }
	</script>
</body>

정리

  • DocumentFragment 노드
    1) 오직 메모리상에만 존재하는 경량화된 DOM
    2) DocumentFragment를 DOM노드에 추가한다고 해도 DocumentFragment 노드 자체는 추가되지 않고 그 자식 노드만 추가
    3) DocumentFragment를 DOM에 추가할 때, DocumentFragment의 자식노드는 더 이상 생성한 메모리상의 위치에 존재하지 않음. 만약 이를 유지시키고 싶다면 cloneNode를 통해 복제하는 방법이 존재

profile
Front-End Developer

0개의 댓글