Javascript focus() 및 select() quirk

Question

Im 양식에서 작업하면서 null에 개체 오류가 발생하지 않습니다. 내가

<script> 
var key1 = document.getElementById('keyword1'); 
    key1.focus(); 
    key1.select(); 
</script> 

를 사용하는 경우 // 모든 것이 좋은 반면

<form action="#" method="post" name="adv_search"> 

<input class="inputbox" type="text" name="keyword1" value="none" id="keyword1"/> 
</form> 

<script> 
document.adv_search.keyword1.focus(); 
document.adv_search.keyword1.select(); 
</script> 

내가하고 싶은

이유를 이해하기 //. 제가 ) (그것은

---

가 document.formname.fieldname.focus 야해를 입력 필드에 미리

확실히 ID 태그없이 작동하고자; 및 document.formname.fieldname.select(); 작품을 원하십니까?

Answer 1

귀하의 특정 예 나를 위해 작동하지만이 같은 이름의 다른 필드를 추가하는 경우 :

<input type="text" name="keyword1" /> 
<input type="text" name="keyword1" /> 

다음 document.adv_search.keyword1.focus()이 실패합니다 지정한 오류가 있습니다.

document.adv_search.keyword1 

이 구문에 대한 바로 가기입니다 :

이유는 것입니다 (DOM 레벨 0과 넷스케이프 2 일 다시 간다!) :

이

document.forms.adv_search.elements.keyword1 

(덧붙여, 그것이 새로운 문서가 HTMLDocument 나 HTMLFormElement에 추가되면, 사용중인 컨트롤 이름과 충돌 할 수 있습니다. document.forms 또는 양식을 사용하면 문제가 줄어 듭니다. 요소 컬렉션입니다. 또한 IE는 실수로 모든 이름과 ID를 '문서'로 덤프합니다. 따라서 document.adv_search은 이름이 같은 양식 외에도 id="adv_search"의 요소가있는 경우 틀린 것을 반환합니다.)

어쨌든 DOM 레벨 0 스크립팅 메소드는 이와 같은 이름으로 요소에 액세스 할 때 약간 이상하게 동작합니다. 일치하는 요소가 하나있는 경우 해당 요소를 독립 실행 형 개체로 가져옵니다. 반면에 둘 이상이 있으면 객체 목록을 얻습니다. 배열과 같은 목록에 focus() 또는 select()을 호출 할 수 없으므로 오류가 나타납니다. 리스트가 리턴 될 때 keyword1 [0] .focus()와 같은 것을해야한다.

그렇다면 구식 DOM 레벨 0 방법을 사용하여 양식 컨트롤에 액세스할지 여부를 결정해야합니다.이 경우에는 단일 또는 다중 항목에 대한 스니핑에 대처해야합니다. - 컨트롤 또는 'DOM 레벨 1'에 의해 도입 된 ID 기반 방법으로 이동 : 스크립트의

document.getElementById('keyword1').focus(); 

의 ID 기반의 방법은 일반적으로 좀 더 입력하는 (그리고 당신이 원하는 모든 요소에 '아이디의를 추가 이 방법으로 액세스 할 수 있습니다. 아직 없으면 간단하지만 모호하지 않습니다. (또한 다음> 자체를 < 형태에 name을 드롭 할 수있다.)

Answer 2

ID 접근 방식이 가장 좋지만 이름으로 이동하려면 getElementsByName을 사용하십시오. 이 경우

, 그것은 다음과 같습니다

<script> 
    // retrieves array of objects with the name 'keyword1' 
    // and takes the first one 
    var key1 = document.getElementsByName('keyword1')[0]; 
    key1.focus(); 
    key1.select(); 
</script>