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