getElementById()로 HTML 쉽게 다루기, 같이 배워볼까?
안녕하세요, 여러분! 오늘은 자바스크립트에서 참 유용한 친구, getElementById()에 대해 이야기 나눠볼게요. 이건 자바스크립트 DOM을 다룰 때 HTML 요소를 쏙쏙 찾아주는 마법 같은 메서드예요. "버튼 누르면 텍스트 바꾸고 싶어요"거나 "특정 div를 숨기고 싶어요" 같은 고민, 웹 개발하면서 자주 생기죠? 그럴 때 getElementById가 딱이에요! 2025년 3월인 지금도 웹 개발의 기본 중 기본이라, 초보자든 고수든 꼭 알아두면 좋아요. 같이 배워보면서 재밌게 익혀볼까요?
getElementById()가 뭐예요?
getElementById()는 이름처럼 HTML 문서에서 특정 ID를 가진 요소를 가져오는 방법이에요. DOM은 HTML을 나무처럼 트리 구조로 만든 거라 생각하면, 이 메서드로 원하는 가지를 딱 뽑아올 수 있죠. 쓰는 법은 진짜 간단해요: document.getElementById("아이디") 이렇게 하면 끝! ID는 요소에 붙인 고유한 이름표 같은 거라, 중복되지 않게 조심해야 해요.
어떻게 써볼까? 간단 예제
말로만 하면 감이 안 오죠? 직접 코드로 보여드릴게요!
<html>
<body>
<p id="myText">안녕하세요!</p>
<button onclick="changeText()">텍스트 바꾸기</button>
<script>
function changeText() {
var element = document.getElementById("myText");
element.innerHTML = "반갑습니다!";
}
</script>
</body>
</html>
여기서 버튼을 누르면 "안녕하세요!"가 "반갑습니다!"로 바뀌어요. getElementById("myText")가 "myText"라는 ID를 가진 <p>를 찾아서 변수에 담고, innerHTML로 내용을 바꾼 거예요. 이렇게 HTML 요소 선택이 쉬워진답니다!
왜 좋을까? 특징과 장점
getElementById의 매력 몇 가지 소개할게요. 먼저, 속도가 빠빠빠빠해요! ID는 문서에서 유일하니까 DOM에서 바로 찾아와서 효율적이에요. querySelector보다 빠르다고 할 수 있죠. 또, 딱 하나의 요소만 반환해줘요. 클래스나 태그로 여러 개 찾는 getElementsByClassName과는 달라요. ID가 없으면 null을 돌려줘서 에러 잡기도 편하답니다.
간단하고 빠릿빠릿해서 초보자도 금방 감 잡을 수 있어요!
조심할 점도 있어요!
좋은 점 많지만, 주의할 것도 있죠. 첫째, ID는 절대 중복되면 안 돼요. 같은 ID가 두 개면 첫 번째만 잡히니까 엉뚱한 결과가 나올 수 있어요. 둘째, 대소문자 구분해요. "myText"와 "MyText"는 달라요! 셋째, DOM이 로드되기 전에 호출하면 못 찾을 수도 있어요. <script>를 <head>에 넣으면 오류 날 수 있으니, 문서 끝에 넣거나 이렇게 해보세요:
window.onload = function() {
var element = document.getElementById("myText");
console.log(element); // 안전하게 잡혀요!
};
실무에서 짱 유용해요
자바스크립트 DOM 다룰 때 getElementById는 진짜 많이 써요. 폼 입력값 가져오거나 버튼 이벤트 만들 때 특히 좋아요. 예를 들면, 쇼핑몰에서 "장바구니 담기" 버튼에 이렇게 써볼까요?
<input id="quantity" type="number" value="1">
<button onclick="addToCart()">담기</button>
<script>
function addToCart() {
var qty = document.getElementById("quantity").value;
alert(qty + "개 담겼습니다!");
}
</script>
입력값을 가져와서 알림으로 띄우는 간단한 예제예요. 이렇게 동적으로 HTML 요소를 조작할 수 있죠!
jQuery랑 비교해보면?
jQuery 좋아하시는 분들은 $("#myText")로 비슷하게 하죠. 하지만 getElementById는 순수 자바스크립트라 라이브러리 없이 가볍고 빠릿해요. jQuery가 편리하긴 해도, 간단한 작업엔 이게 더 나을 때 많아요.
마무리하며, 우리 같이 연습해요!
getElementById() 어때요? 자바스크립트 메서드 중 기본이지만 엄청 강력하죠. ID로 요소를 딱 잡아서 텍스트 바꾸고, 값 가져오고, 이벤트 걸고, 웹 개발 시작하는 분들께 딱이에요! 저는 이걸로 토글 버튼 만들어 연습해봤는데, 진짜 재밌었어요. 여러분도 한번 써보고, 궁금한 거 있으면 댓글로 물어보세요! 웹 개발 기초 다지기에 최고랍니다!
'자바스크립트' 카테고리의 다른 글
| 자바스크립트 변수 선언 (var, let, const) (53) | 2025.06.09 |
|---|---|
| 자바스크립트 계산기 (16) | 2025.03.23 |
| encodeURI(): URL 인코딩 쉽게 이해하기 (2) | 2025.03.06 |
| location.href로 이동 후 뒤로 가기가 안 될 때 해결법 (4) | 2025.03.06 |
| .split() 메서드를 이용하여 문자열을 분할하고, 배열에서 값을 선택하는 방법 (2) | 2025.02.18 |
