DOM 작업에 대한 호환성 팁 공유_DOM

예를 들어, ul 아래의 모든 li 요소를 얻을 때입니다. 또는 요소의 다음 요소인 경우. 이 성가신 공간 문제가 발생할 수 있습니다. 물론 이러한 공간은 IE 브라우저에서 자동으로 필터링됩니다. 반면에 FF는 그렇게 열심히 일하지 않아요. FF 브라우저는 이러한 공백을 요소로 처리합니다. Dom의 공간 요소가 헷갈린다면 다음 코드를 실행해 보세요. 테스트하려면 IE와 FF라는 두 개 이상의 브라우저를 사용하십시오. 당신은 모든 것을 이해할 것입니다!

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

;body>

이 코드를 실행한 후입니다. IE에 3. 팝업이 나타나는 것을 볼 수 있습니다. FF7에서 팝업됩니다.

1. html


2. dom
   ;/li>
   

<script> <br>var list = document.getElementById("list") <br>var list_child = list.childNodes; <br>alert("ol에는 각각 "list_child.length" 요소가 있습니다.") <br>for(var i = 0; i<list_child.length; i ){ <BR>alert(list_child)의 하위 요소 [i].tagName); <BR></script>



위의 코드는 ol 요소의 모든 하위 요소를 가져옵니다. 그리고 ol에서 여러 하위 요소를 팝업합니다. ol에는 3개의 li 요소가 포함되어 있음을 알 수 있습니다. IE에서는 3이 뜹니다. 그렇다면 FF 및 Chrome 브라우저에 7이 나타나는 이유는 무엇입니까? 실제로 코드를 작성할 때. 요소와 요소 랩 사이에 공간이 형성됩니다. (참고: 캐리지 리턴을 입력하면 공백이 생길 것이라고 생각하지 마십시오. 이는 잘못된 것입니다. 즉, 요소 ​​사이의 공백은 줄을 수백 번만 변경한다는 의미입니다. 또한 공백으로 계산됩니다. ) FF 및 Chrome 브라우저는 이러한 공간 요소를 필터링하지 않습니다. 따라서 7을 팝업하는 것도 정확합니다.
아래에서는 동일한 HTML 구조를 사용합니다. 이러한 공간 요소를 필터링하고 제거하는 방법을 시연하려면

코드를 복사하세요.

코드는 다음과 같습니다.

IE, FF, Chrome에서 반환된 결과가 동일하다는 것을 알 수 있습니다.

1. html


2. dom
   ;/li>
   

<script>function Del_space(elem){ //공백 필터링 기능 <BR>var elem_child = elem.childNodes; <BR>for(var i = 0;i<elem_child.length;i ){ <BR>//텍스트 노드이고 내용에 공백만 포함된 경우 노드를 삭제합니다<BR>if(elem_child[i]. nodeName = = "#text" && ! /S/.test(elem_child[i].nodeValue)){ <BR>elem.removeChild(elem_child[i]);//요소가 공백이면 삭제하세요 <BR>} <BR>} <BR>} <BR>Del_space(document.getElementById("list")); //ol의 모든 공백을 삭제합니다. <BR>var list = document.getElementById("list") <BR> var list_child = list.childNodes; //ol의 모든 하위 요소 가져오기 <BR>for(var i=0;i<list_child.length;i ){ <BR>alert(list_child[i].tagName); } <BR></script>




다음 방법을 권장합니다.



코드 복사


코드는 다음과 같습니다.

; 이 코드를 실행한 후. IE, FF, Chrome에서 반환된 결과가 동일하다는 것을 알 수 있습니다.

html

dom

;/li>

<script> <br>for(var x=0,list_li = document.getElementById('list').childNodes; x<list_li.length; x ) { <BR>if(list_li[x].nodeType == 1){ <BR>alert(list_li[x].tagName) <BR>} <BR>} <BR></script> ;/본문>