IE의 childNodes와 FireFox_javascript 기술의 차이점

Javascript에서는 모든 사람이 getElementsByTagName 및 childNodes를 사용하여 노드를 통과하려고 시도했다고 생각합니다. 그러나 getElementsByTagName은 복잡한 DOM 구조 탐색에 childNodes를 사용하는 것만큼 좋지 않습니다. 왜냐하면 childNodes는 DOM 계층 구조를 더 잘 처리할 수 있기 때문입니다. 탐색이 필요할 때는 childNodes를 먼저 사용하는 것이 좋습니다.
그러나 불행히도 IE와 FireFox에서는, childNodes는 약간 다릅니다.

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

function view(){
var childs1=$('FirstDiv').childNodes
var childs2=$('SecondDiv').childNodes ;
alert("FirstDiv의 길이: " children1.length "--SecondDiv의 길이: " children2.length)
var $=function(id)
{ return document.getElementById (id) }



< !-- 노드 사이에 공백과 캐리지 리턴을 남기는 첫 번째 순회 객체-->

1

;2

3

첫 번째

두 번째

세 번째

IE와 Firefox를 사용하면 두 가지 다른 결과가 나타납니다. IE의 결과는 3:3이고 Firefox의 결과는 7:3입니다. 어떻게 이런 일이 일어날 수 있습니까?

구조적으로 객체 1과 객체 2의 차이점은 객체 1의 자식 노드 사이에 캐리지 리턴이나 공백이 있는 반면, 객체 2는 끝에 한 줄로 쓰여진다는 것입니다. 누구나 생각했을 것입니다. IE는 완전한 레이블을 노드로 취급합니다. 위의 상황 외에도 Firefox는 한 레이블의 끝 문자 ">"와 다음 레이블의 시작 문자 "<" 사이의 내용을 변환합니다(텍스트, 공백 및 캐리지 리턴을 포함한 주석 제외). , 탭)도 노드로 간주됩니다. 그리고 이러한 노드에는 고유한 속성과 값(nodeName="#text")도 있습니다.
실제 애플리케이션에서 Firefox가 하위 노드를 탐색할 때 for 루프에
if(childNode.nodeName=="#text") continue;
또는 nodeType == 1을 추가할 수 있습니다.
이러한 방식으로 불필요한 작업을 건너뛰고 프로그램이 더욱 효율적으로 실행됩니다.
첨부파일:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
노드. DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12

var node = document.documentElement.firstChild;
if(node.nodeType != Node.COMMENT_NODE) ​​​​
alert(" 코드에 주석을 잘 달아야 합니다!");