HTML DOM getElementById() 메서드는 id를 이 함수에 매개변수로 전달하여 요소를 반환하는 데 사용됩니다. 나중에 조작할 요소를 가져오는 데 가장 일반적으로 사용되는 가장 쉬운 방법 중 하나입니다. 지정된 Id가 존재하지 않으면 NULL을 반환합니다.
구문
다음은 getElementById() 메서드의 구문입니다. -
document.getElementById(elementID)
예시
getElementById() 메서드의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
위의 예에서 -
먼저 id가 "LINK1"이고 href 속성 값이 "https://www.google.com"으로 설정된 앵커 요소를 만들었습니다.
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
그런 다음 사용자가 클릭할 때 changeLink()를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeLink()">CHANGE</button>
changeLink() 메소드는 문서 객체 getElementById() 메소드를 사용하여 요소를 가져오고 요소 ID를 매개변수로 전달합니다. 그런 다음 변수 l에 할당한 요소를 반환합니다. 전역 스타일 속성을 사용하여 앵커 태그의 color 및 fontSize 속성 값을 설정합니다 -
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}