자바스크립트로 공백 버그 해결하기

오늘은 IE 브라우저와 IE를 제외한 표준 브라우저(FF, Chrome, Safari) 등 에서 DOM 엘리먼트를 다르게 해석하는 경우 중 이미 많이 알려진 공백 버그에 대해 알아 보겠습니다.

말인즉, IE를 제외한 표준 브라우저에서는 엘리먼트 사이에 공백 엘리먼트(줄바꿈)가 존재하며, 브라우저가 이를 하나의 #text 엘리먼트로 간주해 버리는 버그가 있다는 것입니다.

아래는 파이어버그로 본  DOM Element 구조입니다.

보다시피 각 엘리먼트 사이에 공백 엘리먼트(#text)가 존재하는 것을 확인할 수 있습니다.

이 악명 높은 공백 버그 때문에 노드 탐색 시 많은 어려움이 따를수 있으며, 이를 위한 해결하기 위한 방법으로 해당 엘리먼트의 노드 타입을 구분하여 공백 엘리먼트를 제거하는 코드를 작성할 수 있습니다. 

1. function clearWhiteElement(elem){
2.    
3.     elem = elem || document;
4.    
5.     var childs = elem.childNodes
6.       , length = childs.length;
7.  
8.     for (var i = 0; i < length; i++){
9.        
10.         var child = childs[i];
11.    
12.         if (child)
13.         {
14.             if (child.nodeType === 3 && !/\S/.test(child.nodeValue)){
15.                 elem.removeChild(child);
16.             }
17.             else if(child.nodeType === 1)
18.             {
19.                 clearWhiteElement(child);
20.             }
21.         }
22.         else{
23.             var n = next(elem);
24.             if (n) clearWhiteElement(n);
25.         }
26.     }
27. }
28.  
29. function next(elem){
30.    
31.     do{
32.         elem = elem.nextSibling;
33.     }
34.     while(elem && elem.nodeType !== 1)
35.  
36.     return elem;
37.  
38. }
39.  
40. window.onload = function(){
41.    
42.     alert(document.body.firstChild.nodeName); // #text
43.     clearWhiteElement();
44.     alert(document.body.firstChild.nodeName); // DIV
45. }

위 코드를 이용하여 공백 엘리먼트를 제거한 후의 모습입니다.

위에서 보다시피 공백 엘리먼트들이 모두 제거되었으며, 이를 통해 노드 탐색 시 브라우저 특성을 무시할 수 있게
되었습니다.

하지만 공백 엘리먼트를 제거하기 위해 모든 노드를 일일이 탐색하는 비용이 들어가므로 전체 엘리먼트와 같이 많은
엘리먼트를 탐색해야 하는 경우는 되도록 쓰지 않는 것이 좋을 것입니다.