createDocumentFragment 사용해 봤는데 문법에 맞게 제대로 사용한 것인지 궁금합니다
환히찬
여러 경우로 테스트 해보니, 아래 코드에서 밑줄 친 부분이 문법에 어긋난 것 같은데요,어긋난 것이 맞다면, 왜 어긋난 것인지 궁금합니다.(한 문서에 두번 작성하면 어긋나는 것 같은데요 확실치가 않습니다...)
createDocumentFragment(); (뭐라고 불러야 할지..) 이 DOM노드(?)의 역할이 따로따로 떨어져있는 엘리먼트 덩어리들를 붙이는데 사용되는 것 같은데요, 좀 더 자세히 알고 싶은데 한글로 설명되어 있는 곳 아시면 링크 좀 부탁드려요. /* 코드생성 */
var frag1, p, t, div, body; frag1=document.createDocumentFragment();
body=document.getElementsByTagName(body)[0]; p=document.createElement(p); t=document.createTextNode(Javascript1); div=document.createElement(div);
p.appendChild(t); div.appendChild(p); frag1.appendChild(div);
p=document.createElement(p); t=document.createTextNode(Javascript2); div=document.createElement(div);
p.appendChild(t); div.appendChild(p); frag1.appendChild(div); body.appendChild(frag1);
/* 코드 추가생성 및 붙임 */
var frag2=document.createDocumentFragment(); var choiceDivs=document.getElementsByTagName(div); var choicePs0=choiceDivs[0].getElementsByTagName(p); var choicePs1=choiceDivs[1].getElementsByTagName(p); var createTxt1=document.createTextNode( 동적페이징을 가능케 하는); choicePs1[0].appendChild(createTxt1); frag2.appendChild(choicePs1[0]);
body.appendChild(frag2);ps.
-
다은
그냥 frag 를 두번 사용해도 되는지에 대한 질문이었는데 계속 보다보니 헷갈리네요. 답변 참고하겠습니다. js 가 파고 들수록 어렵네요..ㅎ;;
-
꽃봄
appendChild를 쓰면 기존 노드가 삭제 move하고 비슷하군요..
원하신은 화면이 무엇인지 잘 모르겠습니다.
만약
Javascript1
Javascript2 동적페이징
Javascript2 동적페이징을 가능케 하는을 원하신다면
choicePs1[0].appendChild(createTxt1);
frag2.appendChild(choicePs1[0].cloneNode(true)); //cloneNode메소드를 사용해서 같은 노드를 생성. -
귀염포텐
생각해보니 제가 질문목적이 불분명했던 것 같아요... 위 코드 자체도 논리적으로 맞지 않는 것 같고요..
우선, document.createDocumentFragment(); 이것을 두번 이상 사용할 수 있는지 여부에 대해 궁금했었는데 몇 번을 사용하건 상관없는 것으로 보입니다.
다만 기존 생성된 요소에 새로 생성한 요소를 붙이려면 appendChild가 아닌 parentNode.insertBefore 를 사용해야 하는 것 같고요...appendChil -
흰꽃
p.appendChild(t); 밑에 div.appendChild(p)가 없네요.. 이걸 추가하면 될듯합니다.~
-
비치나
/* 코드 추가생성 및 붙임 */ 이 주석 아래의 코드들 삭제하고 출력해보시면 화면에 찍힌 엘리먼트 구조가 다르게 나와서요... 빈 div/div가 생성되서 나오거든요.. 흠..
네 저도 그래서 좀 봐두려고 하는데, 맘처럼 잘 안되네요.^^; 답변 고맙습니다! -
후예
오~~ 오류나는 부분이 없는데요. 이걸 사용하면 좋다고 여러 책에서 많이 소개되고 있는 기법이죠.. 리페인트와 리플로우를 줄이려 성능개선을 이루는데 많은 도움을 주죠~