목차

HTML DOM getElementById() Method

  • description : HTML DOM getElementById() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-07


Source of the article


지정한 ID가 있는 요소를 가져옵니다.

<!DOCTYPE html>
<html>
<body>
    <p id="demo">Click the button to change the text in this paragraph.</p>
    <button onclick="myFunction()">Try it!</button>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";
        }
    </script>
</body>
</html>

Definition and Usage

getElementById() 메서드는 지정 값을 가진 ID 속성의 요소를 반환합니다.

이 방법은 HTML DOM에서 가장 일반적인 방법 중 하나이며, 문서의 요소를 조작하거나 문서 정보를 가져올 때 마다 사용됩니다.

지정 ID를 가진 요소가 없으면 null을 반환합니다.

ID는 페이지 내에서 고유해야 합니다. 그러나 지정 ID를 가진 요소가 둘 이상 있는 경우,
getElementById() 메서드는 소스 코드의 첫 번째 요소를 반환합니다.

Syntax

document.getElementById(elementID)

Parameter Values

Parameter Type Description
elementID String 필수입니다. 가져오려는 해당 요소의 ID 속성 값

Technical Details

반환 값:
반환하는 값은 요소 오브젝트Element Object이며, 이것은 지정 ID를 가진 요소를 나타냅니다.
지정된 ID를 가진 요소가 없으면 null을 반환합니다.

예제

id="demo"를 가진 해당 요소를 가져와 컬러를 변경합니다.

<!DOCTYPE html>
<html>
<body>
    <p id="demo">Click the button to change the color of this paragraph.</p>
    <button onclick="myFunction()">Try it!</button>
    <script>
        function myFunction() {
            var x = document.getElementById("demo");  // Get the element with id="demo"
            x.style.color = "crimson";                // Change the color of the element
        }
    </script>
</body>
</html>