[WEB-005][기초] DOM을 찾고 클릭 이벤트로 화면 바꾸기
페이지 정보
본문
[이번 수업]
HTML로 만든 DOM에서 요소를 찾고 클릭에 반응해 문구를 바꿉니다. `querySelector`, `addEventListener`, `textContent`의 연결을 실습합니다.
[선수지식]
WEB-001~004의 HTML·CSS 선택자·접근성과 JSTS-001~003의 변수·함수·조건식을 알아야 합니다.
[학습목표]
1. DOM이 HTML을 표현하는 노드 트리임을 설명한다.
2. CSS 선택자로 필요한 요소를 찾는다.
3. 이벤트 리스너로 클릭 발생을 처리한다.
4. 사용자 입력을 안전한 텍스트로 화면에 반영한다.
[핵심개념]
DOM(Document Object Model)은 문서를 노드 트리로 표현합니다. 브라우저는 HTML에서 `document`를 만들고 탐색·변경 API를 제공합니다. `document`는 브라우저 기능이므로 일반 Node.js에는 기본으로 없습니다.
`querySelector("#name")`은 CSS 선택자와 처음 일치하는 요소, 없으면 `null`을 반환합니다. 예제는 요소 생성 뒤에 스크립트를 두며 외부 스크립트에는 `defer`를 쓸 수 있습니다.
이벤트(event)는 클릭·입력·로딩 발생 신호입니다. EventTarget인 요소에 `addEventListener("click", callback)`으로 리스너를 등록합니다. `target`은 시작 요소, `currentTarget`은 리스너가 실행 중인 요소입니다. 조상으로 전파되는 성질은 이벤트 위임에 쓰입니다.
`textContent`는 내용을 텍스트로 바꿉니다. 사용자 입력은 `innerHTML` 대신 넣고 길이·허용 문자 검증은 별도로 합니다.
[따라하기]
아래 내용을 `index.html`로 저장하세요.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>DOM 이벤트 실습</title>
</head>
<body>
<label for="name">이름</label>
<input id="name" maxlength="20">
<button id="greet" type="button">인사하기</button>
<p id="output" aria-live="polite">버튼을 눌러 주세요.</p>
<script>
const nameInput = document.querySelector("#name");
const greetButton = document.querySelector("#greet");
const output = document.querySelector("#output");
if (!nameInput || !greetButton || !output) {
throw new Error("필수 요소를 찾을 수 없습니다.");
}
greetButton.addEventListener("click", () => {
const name = nameInput.value.trim();
output.textContent = name
? `${name}님, 반갑습니다!`
: "이름을 입력해 주세요.";
});
</script>
</body>
</html>
```
파일을 두 번 클릭하거나 다음 명령으로 엽니다.
```text
Windows: start index.html
macOS: open index.html
Linux: xdg-open index.html
```
빈 입력이면 `이름을 입력해 주세요.`, `하늘` 입력 뒤에는 `하늘님, 반갑습니다!`가 표시됩니다. button은 키보드로도 작동하고 `aria-live="polite"`는 변경 알림을 돕습니다.
[흔한 실수]
선택자가 틀리면 `null`이므로 요소 존재를 확인합니다. `onclick` 재대입은 앞 처리기를 덮을 수 있어 여러 동작은 `addEventListener`로 등록하세요. 위임에서는 `target`과 `currentTarget`을 구분하고 필요한 경우에만 `preventDefault()`를 씁니다.
[보안 주의]
입력을 `innerHTML`에 연결하면 마크업이 해석될 수 있으므로 `textContent`를 씁니다. maxlength와 DOM 값은 신뢰 경계가 아니어서 서버가 다시 검증해야 합니다. `isTrusted`만으로 권한을 판단하지 말고, 카메라·위치·클립보드는 동의와 최소 범위로 사용합니다.
[직접 해볼 과제]
1. 입력창의 `input` 이벤트를 등록해 타이핑할 때 남은 글자 수를 별도 p 요소에 표시하세요.
2. 여러 이름을 li로 추가하되 사용자 문자열은 `textContent`로 넣고 이벤트 위임으로 삭제 버튼을 처리하세요.
[확인문제]
1. `querySelector`가 일치하는 요소를 찾지 못하면 무엇을 반환하나요?
2. 이벤트의 target과 currentTarget은 어떻게 다른가요?
3. 사용자 입력 표시에서 innerHTML 대신 textContent를 선택한 이유는 무엇인가요?
[다음 학습]
WEB-006에서는 폼 입력을 검증하고 사용자가 이해할 수 있는 오류 메시지를 제공하는 방법을 배웁니다.
[공식 참고 자료]
WHATWG DOM 표준 소개: https://dom.spec.whatwg.org/#introduction-to-the-dom
WHATWG EventTarget 표준: https://dom.spec.whatwg.org/#interface-eventtarget
WHATWG querySelector 표준: https://dom.spec.whatwg.org/#dom-parentnode-queryselector
MDN textContent 참고: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
HTML로 만든 DOM에서 요소를 찾고 클릭에 반응해 문구를 바꿉니다. `querySelector`, `addEventListener`, `textContent`의 연결을 실습합니다.
[선수지식]
WEB-001~004의 HTML·CSS 선택자·접근성과 JSTS-001~003의 변수·함수·조건식을 알아야 합니다.
[학습목표]
1. DOM이 HTML을 표현하는 노드 트리임을 설명한다.
2. CSS 선택자로 필요한 요소를 찾는다.
3. 이벤트 리스너로 클릭 발생을 처리한다.
4. 사용자 입력을 안전한 텍스트로 화면에 반영한다.
[핵심개념]
DOM(Document Object Model)은 문서를 노드 트리로 표현합니다. 브라우저는 HTML에서 `document`를 만들고 탐색·변경 API를 제공합니다. `document`는 브라우저 기능이므로 일반 Node.js에는 기본으로 없습니다.
`querySelector("#name")`은 CSS 선택자와 처음 일치하는 요소, 없으면 `null`을 반환합니다. 예제는 요소 생성 뒤에 스크립트를 두며 외부 스크립트에는 `defer`를 쓸 수 있습니다.
이벤트(event)는 클릭·입력·로딩 발생 신호입니다. EventTarget인 요소에 `addEventListener("click", callback)`으로 리스너를 등록합니다. `target`은 시작 요소, `currentTarget`은 리스너가 실행 중인 요소입니다. 조상으로 전파되는 성질은 이벤트 위임에 쓰입니다.
`textContent`는 내용을 텍스트로 바꿉니다. 사용자 입력은 `innerHTML` 대신 넣고 길이·허용 문자 검증은 별도로 합니다.
[따라하기]
아래 내용을 `index.html`로 저장하세요.
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>DOM 이벤트 실습</title>
</head>
<body>
<label for="name">이름</label>
<input id="name" maxlength="20">
<button id="greet" type="button">인사하기</button>
<p id="output" aria-live="polite">버튼을 눌러 주세요.</p>
<script>
const nameInput = document.querySelector("#name");
const greetButton = document.querySelector("#greet");
const output = document.querySelector("#output");
if (!nameInput || !greetButton || !output) {
throw new Error("필수 요소를 찾을 수 없습니다.");
}
greetButton.addEventListener("click", () => {
const name = nameInput.value.trim();
output.textContent = name
? `${name}님, 반갑습니다!`
: "이름을 입력해 주세요.";
});
</script>
</body>
</html>
```
파일을 두 번 클릭하거나 다음 명령으로 엽니다.
```text
Windows: start index.html
macOS: open index.html
Linux: xdg-open index.html
```
빈 입력이면 `이름을 입력해 주세요.`, `하늘` 입력 뒤에는 `하늘님, 반갑습니다!`가 표시됩니다. button은 키보드로도 작동하고 `aria-live="polite"`는 변경 알림을 돕습니다.
[흔한 실수]
선택자가 틀리면 `null`이므로 요소 존재를 확인합니다. `onclick` 재대입은 앞 처리기를 덮을 수 있어 여러 동작은 `addEventListener`로 등록하세요. 위임에서는 `target`과 `currentTarget`을 구분하고 필요한 경우에만 `preventDefault()`를 씁니다.
[보안 주의]
입력을 `innerHTML`에 연결하면 마크업이 해석될 수 있으므로 `textContent`를 씁니다. maxlength와 DOM 값은 신뢰 경계가 아니어서 서버가 다시 검증해야 합니다. `isTrusted`만으로 권한을 판단하지 말고, 카메라·위치·클립보드는 동의와 최소 범위로 사용합니다.
[직접 해볼 과제]
1. 입력창의 `input` 이벤트를 등록해 타이핑할 때 남은 글자 수를 별도 p 요소에 표시하세요.
2. 여러 이름을 li로 추가하되 사용자 문자열은 `textContent`로 넣고 이벤트 위임으로 삭제 버튼을 처리하세요.
[확인문제]
1. `querySelector`가 일치하는 요소를 찾지 못하면 무엇을 반환하나요?
2. 이벤트의 target과 currentTarget은 어떻게 다른가요?
3. 사용자 입력 표시에서 innerHTML 대신 textContent를 선택한 이유는 무엇인가요?
[다음 학습]
WEB-006에서는 폼 입력을 검증하고 사용자가 이해할 수 있는 오류 메시지를 제공하는 방법을 배웁니다.
[공식 참고 자료]
WHATWG DOM 표준 소개: https://dom.spec.whatwg.org/#introduction-to-the-dom
WHATWG EventTarget 표준: https://dom.spec.whatwg.org/#interface-eventtarget
WHATWG querySelector 표준: https://dom.spec.whatwg.org/#dom-parentnode-queryselector
MDN textContent 참고: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
- 이전글[BACK-005][기초] 입력을 검증하고 이해하기 쉬운 오류 보내기 26.09.01
- 다음글[JSTS-005][기초] Promise와 async·await로 비동기 흐름 읽기 26.08.31
댓글목록
등록된 댓글이 없습니다.