2.2.1 document.getElementById
약 6분
읽기 설정
글자 크기
줄 간격
글꼴
2.2.1 document.getElementById
document.getElementById는 HTML 문서에서 특정 ID를 가진 요소를 선택하는 메서드입니다. 이 메서드는 JavaScript를 활용하여 DOM을 조작할 때 매우 자주 사용됩니다. 각 요소는 웹 페이지에서 고유한 ID를 가져야 하며, 이를 통해 JS와 CSS를 쉽게 접근하고 수정할 수 있습니다.
아래 예제를 통해 document.getElementById를 사용하는 방법을 알아봅시다.
예제
다음은 HTML 파일에서 특정 요소를 선택하여 내용을 변경하는 간단한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document.getElementById 예제</title>
<style>
#myElement {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="myElement">Hello, World!</h1>
<button id="changeText">텍스트 변경하기</button>
<script>
const button = document.getElementById('changeText');
button.addEventListener('click', () => {
const element = document.getElementById('myElement');
element.textContent = '안녕하세요, 자바스크립트!';
});
</script>
</body>
</html>
이 예제에서는 버튼을 클릭할 때 Hello, World!라는 텍스트가 안녕하세요, 자바스크립트!로 변경됩니다. 이것은 document.getElementById를 사용하여 특정 요소를 선택한 후, textContent 속성을 통해 요소의 내용을 수정한 것입니다.
실습
이제 본인의 HTML 파일을 만들고, 아래의 요구사항을 실습해보세요.
- ID가
myDiv인<div>요소를 만들고, 기본 텍스트를 설정합니다. - ID가
changeStyle인 버튼을 만들어, 클릭했을 때 배경색을 변경하고 텍스트를 변경하도록 합니다.
응용
더 복잡한 기능을 위해, 추가적으로 창을 모달 형식으로 띄우는 기능을 추가해보세요. 예를 들어, 버튼 클릭 시 모달 창을 외부로 불러오고 보여주는 기능을 구현할 수 있습니다.
정리
document.getElementById는 특정 ID를 가진 DOM 요소에 접근하는 가장 간단한 방법 중 하나입니다. 이 방법을 사용하여 요소의 속성을 변경하고, 사용자 상호작용에 따라 웹 페이지를 동적으로 조작할 수 있습니다. 이는 자주 사용되므로 익숙해져 두는 것이 좋습니다.
오류 및 디버깅
- ID가 존재하지 않는 경우:
document.getElementById에 유효한 ID를 입력하지 않으면null이 반환됩니다. 이 경우, 해당 ID를 가진 요소가 존재하는지 확인하세요. - 스크립트 위치: HTML 문서의
<body>요소가 로드되기 전에 스크립트가 실행되면 오류가 발생할 수 있습니다.<script>태그를<body>의 맨 아래에 두어 이 문제를 피하세요.
실습 과제
- ID가
mainText인 요소를 생성하고, 버튼 클릭 시 이 요소의 스타일(색상, 폰트 크기 등)을 변경하는 기능을 추가하세요. - 여러 개의 요소를 생성하여, 버튼 클릭 시 모든 요소의 내용을 동시에 변경해보세요.
응용 문제
document.getElementById를 사용해 여러 개의 버튼을 만들고, 각각이 특정 요소의 속성을 바꾸는 기능을 만들어보세요. 예를 들어, 하나의 버튼은 색상을 변경하고, 다른 버튼은 폰트 크기를 조절하는 식입니다.
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.