티스토리 뷰
Ajax로 구성된 어플리케이션을 분석하다보면, getElementById( )란 함수를 자주 보게
된다. 이것은 document 오브젝트에 내장된 함수로서, 현재 브라우저내의 오브젝트를 id
기준으로 찾아내고 해당 오브젝트에 대한 참조를 반환한다.
우선 간단히 살펴보자. 다음 예제는 input 텍스트를 찾아서 해당 내용을 경고창(alert)으로
출력하는 예제이다.
<body>
<input id="input_txt" type="text" value="getElementId로 값 구하기" />
<script type="text/javascript">
var inputTxt = document.getElementById('input_txt');
alert(inputTxt.value);
</script>
</body>
위 코드에서 input 텍스트 필드에 id가 input_txt로 설정되어 있고, 텍스트 필드의
내용(value)으로 'getElementId로 값 구하기'라고 설정되어 있다. 그리고 자바스크립트
에서 document.getElementById('input_txt')로 텍스트 필드의 참조를 구한다. 이
참조는 inputTxt에 저장되고 inputTxt.value는 텍스트 필드의 내용(value) 값을 가리키는
것이다.
getElementById( ) 이외에 getElementByTagName( )과 etElementByName( ) 함수를 통해 원하는 오브젝트에 대한 접근이 가능하다. 하지만 전자는 바로 유니크한
오브젝트에 접근하는 것이 아니고(태그의 연관배열을 리턴하고 getElementByTagName
('TD').item(0)과 같이 접근해야 함), 후자는 IE에서만 가능하다. 따라서 id로 구별하여 접근
할 수 있는 getElementById( )를 많이 쓴다.
innerHTML 속성
document.write( )를 사용하면 화면에 출력이 가능하다. 그런데 이것은 페이지가 로딩될
때에만 출력된다(지금까지 내가 알기론...). 예를 들어 이미 화면이 모두 로딩 된 다음 추가
텍스트를 특정 위치에 다시 뿌려줄 수 없다. 이런 상황에서는 <div>의 innerHTML 속성을
사용해서 화면출력을 할 수 있다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>innerHTML 출력</title>
<script type="text/javascript">
function printOut(){
var inputTxt = document.getElementById('input_txt').value;
var outputForm = document.getElementById('output_form');
outputForm.innerHTML = inputTxt;
}
</script>
</head>
<body>
<div> 출력할 문자열을 입력하세요 :
<input id="input_txt" type="text" />
<input type="button" value="출력" onclick="printOut();" />
</div>
<div id="output_form">
</div>
</body>
</html>
위 코드를 실행하면 getElementById('input_txt')로 입력한 텍스트의 값을 구하고, '출력'
버튼을 누르는 순간 getElementById('output_form')을 찾아서 outputForm으로 참조
하고 innerHTML 속성을 바꾸어 입력 문자열을 출력한다.
오늘은 여기까지...
이 글의 저작권은 asoop.com에 있습니다.
출처를 명확히 밝히는 조건으로 스크랩 및 상업적 이용을 허락합니다.http://www.asoop.com/blog/archives/2006/06/_getelementbyid.html
'기억하자정보' 카테고리의 다른 글
| 자바 키보드 입력 (0) | 2007.10.01 |
|---|---|
| - throws IOException (0) | 2007.03.30 |
| 운영체제의 기능 (0) | 2007.03.25 |
| 자바 this (8) | 2007.03.19 |
| 이클립스로 SKVM 개발환경 만들기 (0) | 2007.03.19 |
- 안내
- 궁금한 점을 댓글로 남겨주시면 답변해 드립니다.
