티스토리 뷰

[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을 이용한 간단한 예제 소스

댓글