[DOM] document.all 을 쓰지마라

document.all 은 IE에서만 동작한다.

같은 name을 가진 input이 여러개 있을 때 document.form0.inputName.length 이런 식으로 사용하는 경우도 있다.

이 또한 IE에서만 동작한다.


w3c 스펙에 나와있는 document.getElementById 나 document.getElementsByName을 사용하여야 한다.

1. getElementById는 element를 반환한다. 다음과 같이 사용한다.

var ele = document.getElementById("testID");
alert(ele.value);


2. getElementsByName은  nodelist를 반환한다. 다음과 같이 사용한다.

var nodelist = document.getElementsByName("testName");
for ( var i=0; i<nodelist.length; i++ ) {
  alert(nodelist.item(i).value);
}


참고 : http://developer.mozilla.org/en/docs/DOM:document
Spec : http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1006298752

[Javascript] 이벤트 처리

input 박스에서 키입력을 제어하는 경우의 예를 들어보자.

<script>
  function foo() {
    if(event.keyCode == 13){
     login();
   }
  }
  function login() { // do something..
  }
</script>

<input type="text" name="account">
<input type="password" name="password" onKeyPress="javascript:foo();">

이 코드는 계정(account)와 비밀번호(password)를 입력한 후, 비밀번호 입력창에서 엔터(13)를 치면 로그인 프로세스가 실행되는 예이다.

이 코드는 IE에서만 동작한다. Firefox에서도 동작하기를 원한다면 다음과 같이 작성한다.

<script>
  function foo(event) {
    if(event.keyCode == 13){
     login();
   }
  }
  function login() { // do something..
  }
</script>

<input type="text" name="account">
<input type="password" name="password" onKeyPress="javascript:foo(event);">

[css] cursor : pointer 를 써라

버튼을 이미지로 처리할 때 다음과 같이 코딩을 한다.

<img src="btn_close.gif" style="cursor:hand;">

그러나 이 코드는 IE에서만 원하는 결과를 얻을 수 있다.


다음과 같이 코드를 작성하라.

<img src="btn_close.gif" style="cursor:pointer;">


다음의 w3c표준 문서를 참고하라.

http://www.w3.org/TR/REC-CSS2/ui.html#propdef-cursor


IE 5.0 이하 버전에서 cursor:pointer가 동작하지 않는다고 합니다.(확인은 안해봤음)

IE 5.0이하 버전을 지원해야 할 경우 다음과 같이 css를 작성하여 사용하면 되겠습니다.

<style type="text/css">
#foo {
cursor:pointer;
cursor:hand;
}
</style>
 

[css] px를 꼭 붙이자

다음과 같이 css를 작성하였다.

input {
  font-size:12px;
  font-family:dotum, 돋움;
  color:#707070;
  border:#d1d1d1 solid 1;
  padding:2;
}

IE에선 잘 나온다. 그러나 Firefox에서 보면 다음과 같이 나온다.

다음과 같이 작성하여야 한다.

input {
  font-size:12px;
  font-family:dotum, 돋움;
  color:#707070;
  border:#d1d1d1 solid 1px;
  padding:2;
}

이제 원하던 모양이 나왔다^^