자바스크립트로 각 form의 element(요소)에 접근 방법

펌 http://mungchung.com/xe/lecture/4197

form의 element에 스크립트로 접근하는 방식들을 정리해보았다. 
각 브라우저별로 테스트 했으니 참고 하면 된다. 


IE : 익스플로러 7 
SF : 사파리 3 
FF : FireFox 3 
Chrome : 크롬

1. form의 element에 name으로 접근

<input type="text" value="우후훗!" name="txt1">

접근 방법	실행	브라우저
document.form1.txt1.value		IE, SF, FF, Chrome
document.getElementsByName('txt1')[0].value		IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt1',0).value		IE, SF, FF, Chrome
document.getElementById('txt1').value		IE
document.form1.namedItem('txt1').value		IE
document.form1.elements['txt1'].value		IE, SF, FF, Chrome

2. form의 element에 ID로 접근

<input type="text" value="우후훗!" id="txt2">

접근 방법	실행	브라우저
document.form1.txt2.value		IE, SF, FF, Chrome
document.getElementsByName('txt2')[0].value		IE
document.getElementsByTagName('input').item('txt2',0).value		IE, SF, FF, Chrome
document.getElementById('txt2').value		IE, SF, FF, Chrome
document.form1.namedItem('txt2').value		IE
document.form1.elements['txt2'].value		IE, SF, FF, Chrome

3. form에 중복된 이름의 element가 있을 경우 접근 방법

<input type="text" value="우후훗 1" name="txt3"><input type="text" value="우후훗 2" name="txt3">

접근 방법	실행	브라우저
document.getElementsByName('txt3')[0].valuefor (var i=0; i<document.getElementsByName('txt3').length; i++) { alert(document.getElementsByName('txt3')[i].value); }		IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt3',0).valuefor (var i=0; i<document.getElementsByTagName('input').item('txt3').length; i++) { alert(document.getElementsByTagName('input').item('txt3',i).value); }		IE, SF, FF, Chrome

form의 element가 중복 될 수도 있고 아닐수도 있으면 위의 2가지 방법중 하나를 이용해서 스크립트 작성하는게 편하다. 위의 2가지 접근방법말고 다른 스크립트 코드들은 element가 하나면 일반 element 되고 2개 이상이면 배열이 되어버린다. 이러한 element 중복여부의 대표적인 예가 행추가/행삭제이다. 행이 하나면 element가 하나여서 일반 element가 되는데 행이 두개 이상이면 element가 배열이 되어 버린다. 이 경우 스크립트를 이용해서 접근하려고 하면 해당 element가 하나일 때와 2개 이상 일때 구분해서 처리해 줘야한다.if (typeof(document.form1.txt3.length) == "undefined") { alert(document.form1.txt3.value); } else { for (var i=0; i<document.form1.txt3.length; i++) { alert(document.form1.txt3[i].value); } }딱 봐도 엄청 귀찮은 작업이다. -_- 본인도 예전에는 저와같은 방식으로 이용했다 -_-  위의 방식으로의 또 다른 문제점은 form의 select 요소에 접근 할 때이다. 위의 코드에서는 배열여부를 document.form1.txt3.length 의 typeof 값이 undefined 인지 여부를 통해서 판단했는데 select의 경우에는 위의 구문대로 하면 option의 갯수를 가져와 버린다. 그래서 select 는 또 다른 방식으로 배열 여부를 구분해야한다.  그래서 얻은 결론은 행추가/행삭제 같은 element가 중복 될 수도 있고 안될 수도 있다면 위의 2 가지 방법으로 element에 접근하는 것이 편하다는 것이다

4. form의 element의 사용자 정의 속성 접근

<input type="text" myTag="우후훗!" name="txt4">

접근 방법	실행	브라우저
document.form1.txt4.myTag		IE
document.getElementsByName('txt4')[0].myTag		IE
document.getElementsByTagName('input').item('txt4',0).myTag		IE
document.getElementById('txt4').myTag		IE
document.form1.namedItem('txt4').myTag		IE
document.form1.elements['txt4'].myTag		IE
document.form1.txt4.getAttribute('myTag')		모두 안됨
document.getElementsByName('txt4')[0].getAttribute('myTag')		IE, SF, FF, Chrome
document.getElementsByTagName('input').item('txt4',0).getAttribute('myTag')		IE
document.getElementById('txt4').getAttribute('myTag')		IE
document.form1.namedItem('txt4').getAttribute('myTag')		IE
document.form1.elements['txt4'].getAttribute('myTag')		IE, SF, FF, Chrome

form_access.zip