티스토리 뷰

IT 이야기/프로그래밍

[Javascript] document.getElementById()

하늘과 나b 2012. 4. 10. 17:36
[Javascript] document.GetElementById() 함수


document.GetElementById() 함수


getElementById() 함수는 해당되는 id의 요소에 접근하는 함수입니다. 예를 들어 <특정태그 id="aaa"> 라는 부분이 있을 때 document.getElementById("aaa")라고 한다면 <특정태그 id="aaa">라는 부분에 접근할 수 있다는 거죠.

접근해서 무엇을 하냐구요?
getElementById()를 이용하면 <특정태그 id="aaa">의 여러 특성들을 자바스크립트로 바꿀 수 있다는 거죠. 자세한 예제는 먼저 getElementById에 대해서 알아보고 예제를 통해 보도록 하겠습니다.

document.GetElementById() 란?

     - 지정된 유일한 ID를 가진 요소(element)를 찾는 함수




getElementById()는 어떻게 사용할까요?


getElementById()는 아래와 같이 사용합니다.

getElementById()의 사용법?

element = document.getElementById(id);
              id : 접근하거나 조작하고자 원하는 요소의 id를 입력




지원하는 웹브라우저는?


getElementById()는 거의 모든 브라우저에서 지원합니다.

지원하는 웹브라우저는...

Internet Explorer, Chrome, Firefox, Opera, Safari 등





getElementById() 에 대해서 정리해보면


getElementById()에 대해서 정리해보면 다음과 같습니다

- 일반적인 형태
Element getElementById(String elementId);

- 전달인자
elementId : 원하는 엘리먼트의 id 어트리뷰트 값.

- 반환값
지정된 id 어트리뷰트를 가진 문서 엘리먼트를 나타내는 Element 노드. 
해당하는 엘리먼트를 찾지 못하면 null을 반환.



예제 소스


아래의 소스는 Click me!를 클릭하면 getValue()를 호출하게 되는데, getElementById()함수를 이용해 myHeader의 요소에 접근합니다. 그 다음 myHeader의 요소 안의 내용을 innerHTML로 얻어와서 alert()함수를 이용해서 출력하게 됩니다.


getElementById()를 이용한 예제 소스를 보도록 하겠습니다.
<html>
<head>
<script type="text/javascript">
function getValue()
  {
  // getElementById로 ID가 myHeader인 요소(element)를 반환
  var x=document.getElementById("myHeader");
  alert(x.innerHTML);
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

</body>
</html>





실행화면


위의 소스를 저장해서 실행하면 아래와 같은 화면을 볼 수 있습니다.


위 화면이 보이면 Click Me!를 클릭합니다.


위와 같이 화면이 나왔나요? 


[document.getElementById() 관련 글 더 보기]

[Javascript] getElementById 예제 - 링크 보이기/숨기기
[Javascript] GetElementById 예제
[HTML] innerHTML을 이용한 간단한 예제 소스

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

비주얼 스튜디오에서 소스코드 자동 정렬 쉽게 하기  (2) 2012.04.17
[HTML 쉽게 이해하기 강좌] - <meta> 태그에 대해서  (0) 2012.04.17
[C언어 소스] 짝수의 합을 구하는 프로그램 소스  (0) 2012.04.17
[C언어 소스] 대문자는 소문자 ,소문자는 대문자로 치환하는 프로그램  (3) 2012.04.17
[Javascript] 인터넷 익스플로러(Internet Explorer)에서 console.log 사용하기  (1) 2012.04.13
[JQuery 예제] 네이버 검색창 밑에 있는 검색목록 만들기  (2) 2012.02.24
[C언어 소스] 구구단 전체/홀수/짝수별 출력하는 소스  (0) 2011.12.08
[CSS 쉽게 이해하기] CSS 기본  (0) 2011.12.07
당신이 사용하고 있는 브라우저에서 HTML5를 사용한다면 점수는?  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <input> 태그  (0) 2011.12.07
공유하기 링크
댓글