이 코드의 차이점은 무엇입니까?

Question

위의 코드에서

<input type='text' id='txt' name='txtName' size='20' value='testing'/> 

<script type="text/javascript" language='javascript'> 
    var val = document.getElementsByName('txtName'); 
    alert(val[0].value); 
    alert(window.txtName.value); 
</script> 

우리는

alert(val[0].value); 

alert(window.txtName.value); 

객체에서 값을 얻기위한 두 가지 방법을 사용하고 있습니다. 두 가지 방법의 차이점은 무엇이며 어느 것이 가장 좋은가? 코드의

Answer 1

alert(window.txtName.value); 

이것은 잘못된 방법으로, IE에서만 작동합니다. IE는 모든 명명 된 IDd 요소를 window의 속성으로 복사하므로 모든 종류의 문제를 일으키는 전역 변수도 복사됩니다. 이것에 의지하지 마라.

그런 식으로 일을 더 나은 방법은 다음과 같습니다

alert(document.forms[0].elements.txtName.value); 

가 input이 페이지의 첫 번째 <form> 있다는 가정. 이 일이있는 경우 또한, 양식 이름을 사용할 수 있습니다 :

alert(document.forms.someform.elements.txtName.value); 

을 그리고 그것을 단축 할 수도 있습니다

alert(document.someform.txtName.value); 

당신의 더 큰 기회를 서로 나는 이렇게 권하고 싶지 않다 있지만, 이름과 속성이 충돌합니다.

이 :

alert(document.getElementsByName('txtName')[0].value); 

는 OK이지만, 이미 입력에 id='txt'이 있기 때문에 그것을 대신 고유하지 않은 name 속성에 의존 그것을 사용하는 간단하고 빠른 될 것 :

alert(document.getElementById('txt').value); 

Answer 2

이 줄은 때문에 윈도우 객체에 textName를 추가의 다음 줄에 의해 오류가있을 수 있습니다에 따라 전체 DOM 즉 전체 HTML 페이지

var val = document.getElementsByName('txtName'); 
alert(val[0].value); 

을 찾을 수 있습니다. 이에 대한 자세한

alert(window.txtName.value); 

CHCK : 첫 번째 방법에서 http://snook.ca/archives/javascript/global_variable

Answer 3

, 당신은 자신의 name 속성에 대한 txtName의 값이 모든 요소를 ​​찾고 있습니다. 결과에서 첫 번째로 일치하는 항목을 가져옵니다.

두 번째 방법에서는 txtName이라는 요소가 window 개체의 약식 속성 txtName을 통해 액세스 할 수 있도록 브라우저를 사용합니다.

당신이 볼 수 있듯이, 항상 하나의 요소가 있다는 것을 알고 있다면 불필요합니다. 항상 하나의 요소가 있다는 것을 모르는 경우 문제가됩니다. 또한 대부분의 브라우저에서 두 번째 방법은 작동하지 않습니다.

액세스하려는 특정 요소가 하나만 있다는 것을 알고있을 때 해당 항목에 액세스하는 수단을 사용하지 말고 id - document.getElementById('txt').value으로 액세스하는 것이 좋습니다.