DOM(Document Object Model) API를 활용하여 웹 페이지의 요소를 동적으로 조작하는 방법을 알아보자.
버튼 클릭으로 텍스트 변경하기
버튼을 클릭하면 텍스트 요소의 내용이 변경되도록 이벤트 리스너를 추가해보자.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM API Quiz</title>
</head>
<body>
<p id="text">기본 텍스트</p>
<button id="changeTextButton">텍스트 변경</button>
<script src="src/index.js"></script>
</body>
</html>// DOM 요소 선택
const button = document.getElementById('changeTextButton');
const text = document.getElementById('text');
// 텍스트 요소의 내용을 변경하는 함수
const onClickButton = () => {
text.innerText = "미션 1. DOM API 클리어 🥳";
}
// 이벤트 리스너 추가
button.addEventListener("click", onClickButton);버튼을 클릭하면 addEventListener로 등록한 이벤트 핸들러가 실행되어 텍스트가 변경된다.
createElement와 appendChild를 사용한 요소 생성
다음과 같은 HTML 코드가 있다.
<!DOCTYPE html>
<html>
<head>
<title>Select Tag Quiz</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<!-- 여기에 요소들을 추가 -->
</div>
<script src="src/index.js"></script>
</body>
</html>
createElement와 appendChild메서드를 사용하여 동적으로 select태그와 option요소들을 생성하고,app이라는 id를 가진 div태그의 자식으로 넣어보자.
<!-- 추가할 요소들 -->
<select id="skills">
<option value="javascript">Javascript</option>
<option value="next">Next.js</option>
<option value="react">React.js</option>
<option value="typescript">TypeScript</option>
</select>const skills = [
{ value: "javascript", text: "JavaScript" },
{ value: "next", text: "Next.js" },
{ value: "react", text: "React.js" },
{ value: "typescript", text: "TypeScript" },
];
// 컨테이너 요소 선택
const app = document.getElementById('app');
// select 요소 생성 및 id 부여
const select = document.getElemenById('select');
select.id = 'skills';
skills.map((skill) => {
const option = document.createElement('option');
option.value = skill.value;
option.textContent = skill.text;
selsec.appendChild(option);
});
// select 요소를 app에 추가
app.appendChild(select);createElement로 새로운 요소를 생성하고, appendChild로 부모 요소에 추가한다. 배열의 map메서드를 사용하여 여러 option요소를 반복적으로 생성할 수 있다.
그리고 select태그의 값이 변경될 때마다 선택된 값을 출력할 수 있게 이벤트 리스너도 추가해보자.
select.addEventListener('change', (e) => {
console.log(e.target.value);
});chagne이벤트를 등록하면 사용자가 다른 옵션을 선택할 때마다 선택된 값이 콘솔에 출력된다.
'TIL' 카테고리의 다른 글
| JavaScript의 this와 MPA 구현 (0) | 2025.11.10 |
|---|---|
| innterHTML, innerText, textContent의 차이 (0) | 2025.11.10 |
| 생성자 함수 (0) | 2025.11.09 |
| [CS50] 자료구조 - 연결 리스트 개념과 구현 (0) | 2025.11.09 |
| [CS50] 배열의 크기 조정하기 (0) | 2025.11.08 |