참고: https://www.tutorialspoint.com/how-getelementbyid-works-in-javascript
이 포스트에서는 JavaScript의 getElementById() 메소드가 어떻게 동작하는지에 대해 알아보겠습니다.
JavaScript의 getElementById() 메소드는 document의 메소드 입니다. 이는 HTML 요소의 ID에 해당하는 특정 문자열을 전달하면 요소 객체를 반환합니다. 모든 HTML 요소에는 고유한 ID를 할당할 수 있습니다. 두 개 이상의 요소가 동일한 ID를 갖는 경우 getElementById() 메소드는 첫 번째 요소를 반환합니다. 또한 이는 document 내에서 HTML 요소를 조작하는데 도움을 줍니다. 만일 ID에 매치되는 요소가 없으면 getElementById()는 null을 반환합니다. 요소에 ID가 없는 경우 document.querySelector() 메소드를 사용할 수 있습니다.
문법
getElementByID() 메소드의 문법은 다음과 같습니다:
document.getElementById(id);여기서 id는 찾으려는 요소의 id 입니다. 대소문자를 구분하며 결과 값으로 요소를 반환합니다.
예제 1
아래 코드는 document.getElementById() 메소드의 사용법을 정의하는 예제 프로그램입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> document.getElementById 예제 </p>
<p id="desc-docID">HTML DOM에서 일반적으로 사용하는 메소드 중 하나는 getElementById() 입니다. HTML 요소를 읽거나 바꾸고 싶을 때 document.getElementById()를 사용합니다.</p>
<p id="document-id"></p>
<script>
const content = document.getElementById('desc-docID').innerHTML;
document.getElementById('document-id').innerHTML = "ID 'desc-docID'의 내용 : " + content;
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 결과를 볼 수 있습니다.
예제 2
document.getElementById() 메소드를 사용하여 HTML 요소를 읽거나 변경하는 예제 프로그램입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>document.getElementById 예제</p>
<p id="desc-docID">HTML DOM에서 일반적으로 사용하는 메소드 중 하나는 getElementById() 입니다. HTML 요소를 읽거나 바꾸고 싶을 때 document.getElementById()를 사용합니다.</p>
<p id="document-id"></p>
<script>
document.getElementById('desc-docID').style.color = "blue";
document.getElementById('desc-docID').style.fontStyle = "oblique";
document.getElementById('desc-docID').style.fontSize = "large";
</script>
</body>
</html>코드를 실행하면 다음의 결과가 나타납니다.
예제 3
다음 예제는 document.getElementById() 메소드에 존재하지 않는 id를 전달하여 null을 반환하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>document.getElementById 예제</p>
<p id="sample"></p>
<script>
const content = document.getElementById('demo');
document.getElementById('sample').innerHTML = 'id="demo" 내용: ' + content;
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 결과를 출력합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 SHA-256 해시 생성하기 (7) | 2023.04.25 |
|---|---|
| [javascript] 자바스크립트 MD5 해시 생성하기 (6) | 2023.04.24 |
| [javascript] 에러 제어 (try, catch, throw) (5) | 2023.04.18 |
| [javascript] 반복문 루프 (while, for, for...of, for...in, loop) (3) | 2023.04.18 |
| [javascript] 자바스크립트 로그인 페이지 만들기 (login) (7) | 2023.04.16 |
댓글