고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
SMALL
안녕하세요! 오늘은 자바스크립트에서 HTML 요소를 가져와 변경하는 방법을 배운 내용을 정리해보려고 합니다.
특히, document.getElementById()를 활용하여 HTML 요소를 선택하고 조작하는 방법을 알아보겠습니다.
1. document.getElementById()란?
document.getElementById()는 HTML 문서에서 특정 id 값을 가진 요소를 가져오는 메서드입니다. 가져온 요소의 내용을 변경하거나 스타일을 조작할 수 있습니다.
📌 기본 문법
document.getElementById("id값");이 메서드를 사용하면 해당 id를 가진 요소를 선택할 수 있습니다.
2. HTML 요소 가져오기 및 수정하기
다음과 같은 HTML 파일이 있다고 가정해 보겠습니다.
🔹 HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<h1 class="dkdkdkd" id="title">grap me</h1>
<script src="app.js"></script>
</body>
</html>위 코드에서 <h1> 태그는 id="title"을 가지고 있습니다. 이 요소를 JavaScript에서 변경해 보겠습니다.
🔹 JavaScript 코드 (app.js)
const title = document.getElementById("title");
title.innerText = "Got you";
console.log(title.id); // "title"
console.log(title.className); // "dkdkdkd"실행 결과
화면의 <h1> 요소가 다음과 같이 변경됩니다:
<h1 class="dkdkdkd" id="title">Got you</h1>즉, innerText 속성을 사용하여 <h1> 태그의 텍스트를 **"Got you"**로 변경할 수 있습니다.
3. 요소의 속성 가져오기 및 활용
document.getElementById()를 사용하여 가져온 요소의 속성을 확인하고 활용할 수도 있습니다.
console.log(title.id); // 요소의 id 값 출력
console.log(title.className); // 요소의 class 값 출력이 코드를 실행하면 브라우저 콘솔에서 다음과 같은 결과를 확인할 수 있습니다:
title
"dkdkdkd"이처럼 id, class, innerText 등의 속성을 사용하여 HTML 요소를 동적으로 변경할 수 있습니다.
4. 버튼 클릭 시 텍스트 변경하기
다음은 버튼을 클릭하면 제목이 변경되는 기능을 구현하는 예제입니다.
🔹 HTML 코드
<h1 id="title">Click the button</h1>
<button id="changeText">Change Text</button>🔹 JavaScript 코드
const title = document.getElementById("title");
const button = document.getElementById("changeText");
button.addEventListener("click", function() {
title.innerText = "Text Changed!";
});실행 결과
- 초기 화면: "Click the button"
- 버튼 클릭 후: "Text Changed!"
이처럼 document.getElementById()를 활용하면 HTML 요소를 동적으로 변경할 수 있습니다.
오늘 배운 내용을 정리하면:
✅ document.getElementById()를 사용하면 특정 id 값을 가진 HTML 요소를 가져올 수 있다.
✅ innerText 속성을 활용하여 요소의 내용을 변경할 수 있다.
✅ id, class 등의 속성을 활용하여 요소 정보를 가져올 수 있다.
✅ 버튼 클릭 이벤트 등을 활용하여 동적인 웹페이지를 만들 수 있다.
이제 여러분도 직접 HTML 요소를 조작하는 다양한 실험을 해보세요! 😊
읽어주셔서 감사합니다!
728x90
반응형
LIST
'블로그 > IT지식' 카테고리의 다른 글
| 티스토리 블로그에 카카오 애드핏 연동하기 (0) | 2025.01.27 |
|---|---|
| 티스토리 블로그를 네이버 서치어드바이저에 등록하는 방법 (2) | 2025.01.23 |
| 티스토리 블로그 포스팅, 구글 검색에 빠르게 노출시키는 방법 (1) | 2025.01.23 |
