[Javascript] GetElementById 예제

JavaScript 이야기

[Javascript] GetElementById 예제

JAVASCRIPT로 개발을 하다보면 GetElementById라는 함수를 많이 보거나 사용하게 되는데요. 오늘은 GetElementById() 함수를 어떻게 사용하는지 그 예제에 대해서 알아보도록 하겠습니다.

GetElementById()는?

- document 오브젝트에 내장된 함수로 현재 브라우저 내의 오브젝트를
ID기준으로 찾아내고 해당 오브젝트에 대한 참조를 반환하는 기능을 합니다.

 

 

Ex1. 탭을 누른 효과 구현

다음은 특정 조건을 만족했을 때 다른 객체로 포커스를 이동하는 예제이다.

<script language="javascript">
 function auto_tab(object_id)
{
 n_focus = document.getElementById(object_id) ;
 n_focus.focus() ;
}

 

실행해 보면 다음과 같다

누르세요가 입력되어 있는 텍스트 박스를 클릭하면 다음 텍스트 박스로 이동한다. 

Ex2. 해당 객체의 텍스트 바꾸기

다음은 테스트 결과화면입니다.

소스 시작시에 실행되는 동작들을 정의할 수 있는 onLoad 부분에서 start()라는 함수를 호출하게 설정하였다. start()함수가 호출될 때 test라는 id를 가진 객체를 얻어와서 innerText를 이용하여 해당 객체의 내용을 start complete로 설정하였다.