얼마전 알바로 들어온 회사에서 프로젝트를 살짝 끝냈다.
개발자의 필수코스인 주말출근에 밤도 새면서(ㅠㅠ) 열심히 만들었는데,
예전엔 mootools같은 js라이브러리를 썼다가 안쓰고 만들려니, 크로스브라우징이 내 발목을 잡았다.
이번 프로젝트의 목표 브라우저는 Internet Explorer(이하 ie)와 Firefox(이하 ff).
그런데 내가 짠 자바스크립트가 둘중하나에서 동작을 안했던 경우가 있어
다른 개발자분들의 삽질을 조금이나마 줄여보고자. 이 포스트를 남긴다.
첫째. 동적으로 input을 생성할때.우선 element를 만드는 명령어는 널리 알려져있다.
var input = document.createElement('input');
이렇게 하면 input라는 태그가 만들어진다.
<input />가 만들어진다고 생각하면 된다.
그런데 ie에서는 아래 명령어가 먹지않는다.
input.type = 'hidden';
그래서 해결하고자 ie는 아래와 같은 방법을 썼다.
var input = document.createElement('<input type="hidden" />');
단, 조심할것은 위 코드는 ie에서만 되는것 같다. ff에서는 확실히 안된다.
둘째. 공백을 노드로 인식하느냐 안하느냐 하는 문제.우선 아래와 같은 HTML 코드가 있다고 하자.
<div id="div1">
<span id="span1">내용1</span>
<span id="span2">내용2</span>
<span id="span3">내용3</span>
...(span이 동적이라 몇개가 될지 모름)
</div>
위와같은 상황에서. 모든 span에 특정 동작을 줘야할때.
난 보통 아래처럼 코딩한다.
var spans = document.getElementById('div1').childNodes;
for(var i=0; i<spans.length; i++){
var span = spans.item(i);
(span에 이짓저짓)
}
그런데 ff에서 문제가 발생했다.
난 이유를 알 수 없었다. 당연히 되야될 것 같았다.
그러나 저 이짓저짓부분에
alert(span.nodeType);
을 넣어보고 원인을 알 수 있었다.
ie에서는 whitespace(공백,엔터,탭 등)만으로 이루어진 공간을 무시하는데 비해
ff에서는 하나의 textnode로 취급하기때문에 생긴 에러였다.
그러니 이짓저짓 부분에 span.id 따위의 접근을 하면 에러가 날수밖에 없었다.
그래서 해결책으로 아래처럼 if를 추가했다.
var spans = document.getElementById('div1').childNodes;
for(var i=0; i<spans.length; i++){
var span = spans.item(i);
if(span.nodeType == 1){
(span에 이짓저짓)
}
}
저렇게 if문을 넣어놓으면 textnode를 피해갈 수 있다.
참고로 textnode의 타입은 3이다.
이 프로젝트를 하면서 결심했다.
자바스크립트 노가다에 시간을 쓰느니 걍 prototype쓰자. ㄷㄷㄷ이 포스트가 여러분의 웹표준 개발에 조금이나마 도움이 되길 바라면서....
