javascript document.createDocumentFragment()_javascript 팁 정보

이는 다음 DOM2 메소드를 지원합니다:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, Normalize, RemoveChild, replacementChild
는 또한 다음 DOM2 속성을 지원합니다:
attributes, childNodes, firstChild, lastChild, localName, 네임스페이스URI , nextSibling , nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, PreviousSibling, textContent
다른 메소드는 documentFragment를 매개변수로 사용할 수 있으므로(예: Node의appendChild 및 insertBefore 메소드) 조각이 상위 항목에 추가될 수 있습니다. 물체 .
예:

코드 복사 코드는 다음과 같습니다.

var frag = document .createDocumentFragment( );
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag)

document.createDocumentFragment() 직설적으로 말하면 DOM을 아껴서 사용하세요. DOM의 모든 JavaScript 작업은 페이지 렌더링을 변경하고 전체 페이지를 다시 새로 고치므로 많은 시간이 소모됩니다. 이 문제를 해결하려면 문서 조각을 만들고 모든 새 노드를 여기에 연결한 다음 문서 조각의 내용을 문서에 한 번에 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다.

var oui=document.getElementById("oItem ");
for(var i=0;i{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item" i));
}

위 코드는 이 문을 실행할 때마다 oui.appendChild(oli)를 호출합니다. 찾아보기 서버가 페이지를 업데이트합니다. 둘째, 아래의 oui.appendChild()는 텍스트 노드를 추가하고 페이지도 업데이트합니다. 따라서 페이지는 총 20번 업데이트되어야 합니다.
페이지를 최적화하려면 DOM 작업을 최소화하고, 텍스트 노드를 추가한 후 목록 항목을 추가하고, creatDocumentFragment()를 합리적으로 사용해야 합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var oui=document.getElementById("oItem")
var oFragment=document.createDocumentFragment ();
for(var i=0;i<10;i ){
var oli=document.createElement("li")
oli.appendChild(document.createTextNode("Item" i) ));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment)

W3C 참조: http://www.w3.org/TR /DOM- Level-2-Core/core.html#ID-B63ED1A3
------------------ --- ---------
DocumentFragment는 "경량" 또는 "최소" 문서 개체입니다. 문서 트리의 일부를 추출하거나 새 문서를 만들 수 있기를 원하는 것은 매우 일반적입니다. 문서 조각을 이동하여 문서를 자르거나 재배열하는 것과 같은 사용자 명령을 구현한다고 상상해 보십시오. 이러한 조각을 담을 수 있는 객체를 갖는 것이 바람직하며 이러한 목적으로 노드를 사용하는 것은 매우 자연스러운 일입니다. Document 개체가 이 역할을 수행할 수 있기 때문에 Document 개체는 기본 구현에 따라 잠재적으로 무거운 개체가 될 수 있습니다. 이를 위해 실제로 필요한 것은 매우 가벼운 개체입니다.

더욱이. , 노드를 다른 노드의 하위로 삽입하는 등의 다양한 작업은 DocumentFragment 객체를 인수로 사용할 수 있으며 이로 인해 DocumentFragment의 모든 하위 노드가 이 노드의 하위 목록으로 이동됩니다. DocumentFragment 노드의 하위 노드는 문서 구조를 정의하는 하위 트리의 최상위를 나타내는 0개 이상의 노드입니다. DocumentFragment 노드는 올바른 형식의 XML 문서일 필요는 없습니다. 예를 들어 DocumentFragment에는 하위 노드가 하나만 있을 수 있으며 해당 하위 노드는 텍스트 노드일 수 있습니다. 이러한 구조 모델은 HTML 문서나 올바른 형식의 XML 문서를 나타내지 않습니다.

DocumentFragment가 Document(또는 하위 항목을 취할 수 있는 다른 노드)에 삽입되면 DocumentFragment 자체가 아닌 DocumentFragment의 하위 항목이 Node에 삽입됩니다. 형제인 노드를 생성하려고 합니다. DocumentFragment는 사용자가 insertBefore 및 AppendChild와 같은 Node 인터페이스의 표준 메서드를 사용할 수 있도록 이러한 노드의 부모 역할을 합니다.