Javascript 요소 접근 방법

안녕하세요. 은은한 개발자입니다.

1. form의 element에 name으로 접근

<input type="text" value="test" 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="test" 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="test1" name="txt3"><input type="text" value="test2" name="txt3">

 

접근 방법 브라우저

document.getElementsByName('txt3')[0].value // IE, SF, FF, Chrome

for (var i=0; i<document.getElementsByName('txt3').length; i++) {

	alert(document.getElementsByName('txt3')[i].value);

}


document.getElementsByTagName('input').item('txt3',0).value // IE, SF, FF, Chrome

for (var i=0; i<document.getElementsByTagName('input').item('txt3').length; i++) {

	alert(document.getElementsByTagName('input').item('txt3',i).value);

}

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

<input type="text" myTag="test" 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