▶ 뭉충닷컴
 
mungchung.com login
Site Search
My Space
주절주절...
공부방
쥔장소개
Board
자유게시판
유용한 정보
자료실
Programming
강좌 & Articles
Spring 3.0
프로그래밍 Tip
   -ASP
   -PHP
   -JavaScript
   -HTML
   -Java/JSP
   -Database
   -Crystal Report
   -Visual Basic
   -이클립스
   -리눅스
   -기타
Windows API (VB)
Spread Sheet 7.0
컴퓨터활용 Tip
Other things
StarCraft 전략
StarCraft 문서
김용(金庸)
Son Q & Dieda
글 수 27

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

조회 수 64926 추천 수 0 2008.09.11 18:49:12
뭉충닷컴 *.251.5.1

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].value for (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).value for (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
이 게시물을
첨부
엮인글 :
http://www.mungchung.com/xe/lecture/4197/5cc/trackback
수정... 삭제 목록

댓글 '2'

헤븡

2010.05.31 14:10:21
*.197.9.187

와역시 장난아니심~~ 뭉츙님~~ㅋㅋ 완젼 팬이에요
좋은정보 감사해요

someone

2015.02.16 20:29:01
*.207.136.182

감사함다

문서 첨부 제한 : 0Byte/ 2.00MB
파일 크기 제한 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜 조회 수
27 keyfile을 이용한 ssh 접속 방법 뭉충닷컴 2010-10-28 13836
26 멀티 브라우저 지원하는 frame, iframe 접근 코딩 방법 [3] 뭉충닷컴 2010-07-21 27415
25 crontab을 이용한 Tomcat 서버 자동 재시작 shell 뭉충닷컴 2009-08-28 25566
» 자바스크립트로 각 form의 element(요소)에 접근 방법 file [2] 뭉충닷컴 2008-09-11 64926
23 ERwin 에서 Logical의 컬럼명을 코멘트(Comment)로 변경하기 file [2] 뭉충닷컴 2008-01-16 32587
22 Tabular Data Control 마지막 강좌! 뭉충닷컴 2007-06-14 15722
21 ASP로 웹 어플리케이션 주소 사용하기 file 뭉충닷컴 2006-12-10 18077
20 VB로 WebBrowser 컨트롤의 HTML 제어 file 뭉충닷컴 2006-12-01 21632
19 ASP 페이징 쉽게 처리하기 file [4] 뭉충닷컴 2006-08-29 24842
18 두개의 비슷한 DB를 비교해서 변경된 부분 찾아내기 file 뭉충닷컴 2006-05-03 15053
17 ASP에서 Class 를 이용해보자 file 뭉충닷컴 2006-02-26 25392
16 Hotmail의 DHTML EDITOR 편집기를 이용해보자. file [34] 뭉충닷컴 2006-02-04 30447
15 Tabular Data Control 응용 - 제목 Sort (정렬) 쉽게 하기 [3] 뭉충닷컴 2006-01-27 14158
14 스크립트(Script) 코드를 암호화 시켜보자(Encode/Decode) [2] 뭉충닷컴 2005-06-10 19200
13 dll을 이용한 로그인 file [1] 뭉충닷컴 2005-11-25 22209
12 Tabular Data Control 응용 - 페이징 처리하는 3가지 방법 file [1] 뭉충닷컴 2005-11-23 16347
11 Query를 잼있고, 유용하게 사용해보자 file [3] 뭉충닷컴 2005-10-01 14772
10 Tabular Data Control 응용 - 테이블의 행 배경색이 격으로 변하게하기 뭉충닷컴 2005-09-25 15840
9 폼(Form) 검증해주는 스크립트(Script) file [15] 뭉충닷컴 2005-06-07 19741
8 asp 로 서버에 zip 압축/압축해제(풀기) 예제 file [8] 뭉충닷컴 2005-08-12 20575
7 MS-SQL의 osql.exe 이용 하기 (도스상에서 sql 구문 이용) 뭉충닷컴 2005-09-25 19441
6 SQL Script 로 ERD와 테이블 생성 손쉽게하기 뭉충닷컴 2005-09-25 22506
5 Tabular Data Control 기초 다지기 4 - 마지막! file 뭉충닷컴 2005-09-25 14753
4 Tabular Data Control 기초 다지기 3 file 뭉충닷컴 2005-09-25 14511
3 Tabular Data Control 기초 다지기 2 file 뭉충닷컴 2005-09-25 14266
2 Tabular Data Control 기초 다지기 1 file [1] 뭉충닷컴 2005-09-25 15425
1 OWC를 이용한 웹에서 엑셀 그래프 그리기 file [4] 뭉충닷컴 2007-12-19 20592
쓰기... 목록




Copyright ⓒ 2000-2077 mungchung.com