지정한 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>
getElementById() 메서드는 지정 값을 가진 ID 속성의 요소를 반환합니다.
이 방법은 HTML DOM에서 가장 일반적인 방법 중 하나이며, 문서의 요소를 조작하거나 문서 정보를 가져올 때 마다 사용됩니다.
지정 ID를 가진 요소가 없으면 null을 반환합니다.
ID는 페이지 내에서 고유해야 합니다. 그러나 지정 ID를 가진 요소가 둘 이상 있는 경우,
getElementById() 메서드는 소스 코드의 첫 번째 요소를 반환합니다.
document.getElementById(elementID)
| Parameter | Type | Description |
| elementID | String | 필수입니다. 가져오려는 해당 요소의 ID 속성 값 |
|---|
반환 값:
반환하는 값은 요소 오브젝트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>