getElementById 자바스크립트 ID로 요소 찾기

by

원본: https://www.educba.com/javascript-getelementbyid/

자바스크립트의 getElementById() 메소드는 특정 id 속성을 가진 요소를 검색하고 그 요소를 리턴합니다. 이는 HTML DOM 관련 스크립트를 짤 때 가장 유용하고 일반적으로 쓰이는 메소드입니다. 주로 document의 일부 요소를 찾거나 조작할 때 많이 사용합니다.

이 메소드는 특정 id로 document를 검색하는데 요소를 찾지 못한 경우 null을 리턴합니다. id는 원래 페이지 내에서 고유한 값 이어야 하기 때문에 여러 요소가 같은 id로 지정된 경우 getElementById() 메소드는 첫 번째로 찾아낸 요소만을 리턴합니다.

getElementById 문법

document.getElementById(elementID1);

위 구문의 매개변수인 elementID1은 필수 입력 값 이고, 이는 검색하려는 요소의 id 속성 값 입니다. 자료형은 문자열 타입만 허용합니다.

getElementById 작동 방법

이 메소드는 전달 받은 매개변수를 기반으로 작동하며 document에서 해당 id를 가진 요소를 찾고 그 요소를 리턴합니다. 이는 document에서 정보를 가져오거나 조작하는 작업에 유용하게 쓸 수 있습니다.

Google Chrome, Internet Explorer, Mozilla Firefox, Safari 및 Opera 같은 브라우저와 최신 브라우저 모두에서 작동합니다.

이는 매개변수로 받은 특정 id에 해당하는 요소 객체를 리턴하지만 검색에 실패한 경우 null을 리턴합니다.

예제 1

첫 번째 예제로 버튼을 누르면 화면의 문자열을 변경하는 방법을 알아보겠습니다:

<!DOCTYPE html>
<html>

<body>
  <p id="demo1">아래 버튼을 눌러 문장을 바꿔보세요.</p>
  <button onclick="myFunction1()">버튼</button>
  <script>
    function myFunction1() {
      document.getElementById("demo1").innerHTML = "안녕하세요!";
    }
  </script>
</body>

</html>

이 HTML 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다:

getElementById 문자열 변경 예제 초기화면

여기서 버튼을 누르면 다음과 같이 문장이 변경됩니다:

getElementById 문자열 변경 예제

위의 HTML 코드의 <body> 요소의 첫 번째 요소로 <p>를 넣었고 이 요소의 id를 “demo1″로 지정했습니다. 그 다음 <button> 요소를 넣어 클릭하면 myFunction1() 함수를 호출하게 작성했습니다.

그 다음 스크립트 부분에서 myFunction1() 함수를 정의했고 getElementById() 메소드의 매개변수로 “demo1″을 넣어 document의 <p> 요소를 찾았습니다. 찾은 요소의 innerHTML 속성에 다른 문자열을 넣어 사용자가 버튼을 클릭하면 화면의 문자열이 변경되도록 했습니다.

예제 2

다음은 버튼을 눌렀을 때 화면의 글자 색을 바꾸는 예제입니다:

<!DOCTYPE html>
<html>

<body>
  <p id="demo1">버튼을 클릭해 글자 색을 바꿔보세요.</p>
  <button onclick="myFunction1()">버튼</button>
  <script>
    function myFunction1() {
      const x1 = document.getElementById("demo1");
      x1.style.color = "red";
    }
  </script>
</body>

</html>

위의 예제를 실행하면 다음과 같은 화면이 나타납니다:

getElementById 글자 색 변경 예제 초기화면

화면에서 버튼을 누르면 다음과 같이 문자열의 색이 변하는 결과를 볼 수 있습니다:

getElementById 글자 색 변경 예제

앞에서 설명한 예제와 비슷하게 이번에도 <p> 요소를 만들고 버튼을 클릭하면 자바스크립트가 실행되는 예제입니다.

<p> 요소의 id로 “demo1″을 넣고 버튼을 클릭하면 id가 “demo1″인 요소를 document에서 찾아 글자 색을 변경했습니다.

예제 3

이번에는 기존 요소의 내용을 가져와 document에 그대로 추가하는 예제를 알아보겠습니다:

<!DOCTYPE html>
<html>

<body>
  <p id="element1">GetElementById1</p>
  <hr>
  <p>document에 요소 내용 복사</p>
  <script>
    const s1 = document.getElementById("element1").innerHTML;
    document.write(s1);
  </script>
  <hr>
</body>

</html>

위의 코드를 실행하면 다음과 같은 결과를 볼 수 있습니다:

document 조작 예제

이번에는 id가 “element1″인 <p> 요소를 찾아서 해당 요소의 내용을 가져온 다음 document.write() 메소드를 사용하여 document에 문장을 추가했습니다.

예제 4

<!DOCTYPE html>
<html>

<body>
  <p id="element1">GetElementById1</p>
  <hr>
  <p>"GetElementById1" 였던 문자열을<br>"shinyks.com"으로 변경하고 DOM에 추가</p>
  <hr>
  <script>
    var s = document.getElementById("element1").innerHTML = "shinyks.com";
    document.write(s);
  </script>
  <hr>
</body>

</html>

코드를 실행하면 브라우저에 다음과 같은 문장이 나타납니다:

문자열 조작 예제

이번 예제는 이전 예제와 비슷합니다. 한 가지 다른 점은 getElementById() 메소드로 찾아낸 요소의 내용을 다른 문장으로 바꾸고 이를 document에 추가하였습니다.

getElementById 정리

document에서 특정 id를 가진 요소를 찾기 위해서는 getElementById() 메소드를 사용할 수 있습니다.

이 메소드의 개념을 이해하기위해 문법 구문을 알아봤고, 네 가지 예제를 통해 DOM에서 특정 요소를 검색하는 방법을 살펴봤습니다.

관련 글