[ JavaScript ] FF 에서도 잘 돌아가는 웹사이트 만들기

------------------------------------------------------------
<script>
  function checkForm()
  {
    if (frm.UserName.value == "")
    {
      alert("이름을 입력하세요.");
      frm.UserName.focus();
      return;
    }

    ......
  }
< /script>

< form name="frm">
  <input type="text" name="UserName">
< /form>
------------------------------------------------------------

보통 위와 같이 사용하지 않으시나요?
하지만 저련 경우 [파이어폭스] 에선 작동하지 않습니다.

보통 폼객체를 컨트롤할때 [document.폼네임.객체명] 이런식으로 접근하는데
document는 생략이 가능합니다..
하지만 [파이어폭스]에선 절대 생략해선 안됩니다!!

if (document.frm.UserName.value == "")
{
  alert("이름을 입력하세요.");
  document.frm.UserName.focus();
  return;
}
요런식으로 document를 꼭 붙여줘야 합니다!


------------------------------------------------------------
<script>
  function checkForm()
  {
    if (document.all.UserName.value == "")
    {
      alert("이름을 입력하세요.");
      document.all.UserName.focus();
      return;
    }

    ......
  }
< /script>

< input type="text" name="UserName">
------------------------------------------------------------

저는 폼 객체를 컨트롤 할때 대부분 <form> 태그 안에 객체들을 넣어서 사용하는데
위와 같이 <form> 태그를 생략하는 경우도 있더군요.
이럴땐 document.all 을 사용하여 컨트롤 하는데요...
이런 경우 [파이어폭스] 에선 인식이 안됩니다..

< script>
  function checkForm()
  {
    if (document.getElementById("UserName").value == "")
    {
      alert("이름을 입력하세요.");
      document.getElementById("UserName").focus();
      return;
    }

    ......
  }
< /script>

< input type="text" name="UserName" id="UserName">

위와 같이 document.all.ObjectName 대신 document.getElementById("ObjectName") 요런식으로 
getElementById() 를 사용해야 합니다.
input 태그에도 "id" 항목을 추가 해야 하구요!!

또 배열 형식일 경우에는
document.getElementsByName() 을 사용해야 합니다.

------------------------------------------------------------
var arrValue = document.getElementsByName("ArrValue");
arrValue[0].style.display = "";
arrValue[1].style.display = "none";
------------------------------------------------------------


하지만 여러모로..
input 태그들을 사용할때는..
< form></form> 을 두어서 
document.FormName.ObjectName 이런식으로 접근하는게 젤 좋은거 같습니다..
물론 document.all 등을 사용해도 익스플로어에선 상관은 없지만 뭔가 호환성을 생각한다면 말이죠!



또..
innerText 를 사용하는 경우 파이어폭스에선 작동하지 않습니다..
그럴 경우엔 innerHTML 을 사용하면 같은 효과를 낼 수 있습니다.

또..
< img src="http://wstatic.naver.com/w/n_c600.gif" border="0" onClick="" style="cursor:hand">
위 와 같이 이미지에 onClick 이벤트를 사용하여 링크를 설정하는 경우가 있는데요..
마우스 커서 모양을 손모양으로 바꿔주는 스타일이 style="cursor:hand" 요거를 사용하는데
[파이어폭스]에선 적용되지 않습니다.
style="cursor:pointer" 요렇게 해주면 됩니다!


그러니까 요지는 innerText 대신에 innerHTML 을 쓰고
style="cursor:hand" 대신에 style="cursor:pointer" 를 쓰자 하는 겁니다...