HTML DOM Document getElementById() 메서드

정의와 사용법

getElementById() 메서드는 지정된 id 값을 가진 요소를 반환합니다.

요소가 존재하지 않으면,getElementById() 메서드는 다음을 반환합니다: null의 Element 점, 그것은 무작위로 이러한 Element 점을 반환하거나

getElementById() 메서드는 HTML DOM에서 가장 일반적으로 사용되는 메서드 중 하나입니다. HTML 요소를 읽거나 편집하려는 때면 거의 항상 사용됩니다.

안내

모든 id는 유일해야하지만:

두 개나 그 이상의 동일한 id를 가진 요소가 존재할 때 getElementById() 첫 번째를 반환합니다.

다른 참조:

getElementsByTagName() 메서드

getElementsByClassName() 메서드

querySelector() 메서드

querySelectorAll() 메서드

인스턴스

예제 1

지정된 id를 가진 요소를 가져오십시오：

document.getElementById("demo");

직접 시도해보세요

예제 2

요소를 가져와 그 색상을 변경하십시오：

const myElement = document.getElementById("demo");
myElement.style.color = "red";

직접 시도해보세요

예제 3

또는 단순히 색상을 변경하세요：

document.getElementById("demo").style.color = "red";

직접 시도해보세요

문법

document.getElementById(를 반환합니다. 지정된)

파라미터

파라미터 설명
를 반환합니다. 지정된 필수. 요소의 id 값

반환 값

타입 설명
객체

를 가진 요소

찾지 못하면 null을 반환합니다。

기술 세부 사항

getElementById() 메서드는 중요한 일반적인 메서드로, 특정 문서 요소를 나타내는 Element 객체를 쉽게 얻을 수 있도록 합니다。

id 속성의 값이 를 반환합니다. 지정된 를 가진 여러 Element 점을 찾으면 그것을 반환합니다. 이 메서드가 이러한 요소를 찾지 못하면 null의 Element 점을 찾으면 그것을 반환합니다. 이 메서드가 지정된 를 반환합니다. 지정된 elementId null의 Element 점, 그것은 무작위로 이러한 Element 점을 반환하거나

。주의하세요： 이 메서드의 이름은 Id 끝자리가 아닌ID

HTML 문서에서 이 메서드는 항상 지정된 id를 가진 속성을 검색합니다. 올바르게 입력하십시오 HTMLDocument.getElementByName() 메서드를 사용하여 name 속성의 값에 따라 HTML 요소를 찾습니다。

XML 문서에서 이 메서드는 id 타입의 어떤 속성도 사용하여 찾습니다. 속성 이름이 무엇인지는 관계가 없습니다. XML 속성의 타입이 알 수 없는 경우（예：XML 파서가 무시하거나 DTD를 위치시킬 수 없는 경우），이 메서드는 항상 null클라이언트 시스크립트에서 이 메서드는 XML 문서와 함께 사용되지 않는 경우가 많습니다. 실제로는，getElementById() 이 메서드는 원래 HTMLDocument 인터페이스의 일원으로 정의되었지만 나중에는 2차 DOM에서 Document 인터페이스에 포함되었습니다。

브라우저 지원

document.getElementById() DOM Level 2 (2001) 기능입니다。

모든 브라우저가 지원합니다：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

CSS 강의：CSS 문법

CSS 참조 가이드：CSS #id 선택자

HTML DOM 참조 가이드：HTML DOM id 속성

HTML DOM 참조 가이드：HTML DOM Style 객체