javascript dom 작업 cloneNode 텍스트 노드 복제 사용 기술_javascript 기술

true: 노드를 완전히 복사합니다. 완료란 무엇입니까? 하위 노드와 텍스트 노드를 포함한 모든 것을 복사하는 것을 의미합니다. 소위 완전

false: 현재 노드만 복제됩니다. node.node.node는 하위 노드를 복제하지 않으며 물론 래핑된 텍스트도 복제하지 않습니다. 왜냐하면 모든 텍스트에는 이를 가리키는 노드(텍스트 노드)가 있기 때문입니다.
물론, 경우에 따라 두 노드를 보편적으로 사용할 수 있습니다. 복사할 노드가 일치하지 않습니다. 예를 들어 img...

모두가 더 깊이 이해할 수 있도록 간단한 예를 들어 보겠습니다.

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

Shadow> ; |그림자 없음

스팬 노드를 가리키는 변수를 정의합니다.

var element = document.getElementsByTagName('span')[0 ];
그럼

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

var t1 = element.cloneNode(false).innerHTML;/ /하위 노드 복사 안 함
var t2 = element.cloneNode(true).innerHTML;//모두 복사
alert(t1)
alert(t2) ;

예, (비어있음) ""와 Shadow가 순차적으로 출력됩니다

코드를 복사하세요. 코드는 다음과 같습니다.

var textnode = element.firstChild; //텍스트 노드 지정

var t1 = textnode.cloneNode(false).nodeValue
var; t2 = textnode.cloneNode(true).nodeValue;
alert(t1);
alert(t2);


동시에 Shadow를 출력하는 경우입니다.

[cloneNode 버그]
위의 다중 레벨 연결에서 언급했듯이 cloneNode는 컨테이너를 복사하는 데 사용되지만 cloneNode에는 IE에 버그가 있습니다.
즉, attachmentEvent를 사용하여 이벤트를 dom 요소에 바인딩하면 해당 이벤트는 cloneNode 다음에 복사됩니다.
addEventListener로 추가된 이벤트는 ie 및 ff에서 테스트할 수 없습니다.

div <div id="t"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입하려면 새로 고쳐야 실행됩니다. ]

클릭 ie 및 ff에서 각 div는 경고를 트리거합니다. 키는 두 번째 div입니다. ff에서는 트리거되지 않지만 ie에서는 발생합니다.
물론 이것이 버그인지는 확실하지 않습니다. 아마도 AttachEvent는 원래 이런 식으로 설계되었을 것입니다.
그런데 첫 번째 버전에서는 이 버그 때문에 cloneNode를 사용하지 않았습니다.

해결책을 찾기 전에 이 문제를 확장하고 onclick 이벤트를 직접 추가하면 동일한 버그가 발생하는지 확인하세요.
요소 내부에 onclick을 추가하는 첫 번째 테스트:

div<div id="t" onclick="alert(1)"> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

결과는 ie 및 ff Copy 이벤트에 모두 표시됩니다.

js에 onclick을 다시 추가하여 테스트하세요.

<div id="t">div</div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]<script> var o = document.getElementById("t"); if(o.attachEvent){ o.attachEvent("onclick", function(){alert(2)}); }else{ o.addEventListener("click", function(){alert(2)}, false); } document.body.appendChild(o.cloneNode(true)); </script>
결과적으로 ie 및 ff에서는 이벤트가 복사되지 않습니다. AttachEvent에서만 이 버그가 발생하는 것 같습니다. 이점은 말할 필요도 없이 IE에서 위에서 언급한 cloneNode 버그를 해결할 수 있습니다.
구현 원칙은 onclick을 사용하여 ie에서 이벤트를 바인딩하는 것이고 위 테스트는 또한 onclick으로 바인딩된 이벤트가 cloneNode에 의해 복사되지 않는다는 것을 증명하기 때문입니다.