[Javascript] documentFragment
15291 ワード
初めて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><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の特性!
->メモリから自動的に削除されました.
<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>整理する
1)メモリにのみ存在する軽量レベルDOM
2)DocumentFragmentをDOMノードに追加してもDocumentFragmentノード自体は追加されず、そのサブノードのみが追加される
3)DocumentFragmentをDOMに追加すると、DocumentFragmentのサブノードは作成したメモリの場所に存在しなくなります.これを維持するには、cloneNodeを使用して
Reference
この問題について([Javascript] documentFragment), 我々は、より多くの情報をここで見つけました https://velog.io/@soulee__/Javascript-documentFragmentテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol