javascript 왕왕기초

김서현·2025년 1월 16일

frontend

목록 보기

14/34

DOM Manipulation (돔 조작)

DOM은 "Document Object Model"의 줄임말로, 웹 페이지를 자바스크립트로 조작할 수 있게 해주는 구조라고 생각하면 돼. 웹 페이지의 HTML 태그들이 모두 자바스크립트 객체로 변환되어 있기 때문에, 이걸 이용해서 내용을 바꾸거나, 새로운 요소를 추가하거나, 삭제할 수 있어.

EventListener와 onClick

EventListener는 웹 페이지에서 일어나는 특정 이벤트(클릭, 키보드 입력, 마우스 움직임 등)를 감지하고, 그에 따라 동작하도록 코드를 작성할 때 사용해.

onClick은 버튼을 클릭했을 때 특정 동작을 하도록 설정하는 방식인데, 코드에 직접 추가하거나 HTML 속성으로 추가할 수 있어.

// onClick
<button onclick="alert('버튼 클릭!')">클릭</button>

언제 어떤 것을 사용해야 할까?

onClick 사용 추천 상황:
- 간단한 테스트나 데모 작업.
- 유지보수보다는 빠르게 이벤트를 붙이는 것이 중요한 경우 = 하나만 추가 가능하고, 나중에 덮어쓰기 가능
addEventListener 사용 추천 상황:
- 다수의 이벤트 핸들러가 필요한 경우 = 한 요소에 여러 개의 동작을 추가
- 이벤트 제거가 필요한 경우.
- 모던하고 유지보수하기 쉬운 코드를 작성하고 싶은 경우.

예제 비교

`onClick`

const button = document.querySelector("button");
button.onclick = () => console.log("첫 번째 핸들러");
// 기존 핸들러를 덮어씀
button.onclick = () => console.log("두 번째 핸들러");

출력:

두 번째 핸들러

`addEventListener`

const button = document.querySelector("button");
button.addEventListener("click", () => console.log("첫 번째 핸들러"));
button.addEventListener("click", () => console.log("두 번째 핸들러"));

출력:

첫 번째 핸들러
두 번째 핸들러

addEventListener가 더 강력하고 유연하므로, 일반적으로 이 방법을 사용하는 것이 좋습니다.

Event Loop (이벤트 루프)

자바스크립트는 한 번에 하나의 작업만 처리하는 "싱글 스레드" 언어야. 하지만 이벤트(클릭, 타이머, 데이터 요청 등)가 많으면 어떻게 처리할까?
Event Loop는 이 작업들을 순서대로 처리해주는 "대기 줄" 같은 역할을 해.
1. Call Stack: 지금 실행 중인 코드가 쌓이는 곳.
2. Task Queue: 이벤트나 비동기 작업이 끝난 후 실행 대기 중인 코드들이 모이는 곳.
3. Event Loop가 "Call Stack"이 비었는지 확인하고, 비어 있으면 "Task Queue"에서 코드를 꺼내 실행해.

getElementById

getElementById는 id 속성을 가진 HTML 요소를 선택할 때 사용해. id는 각 요소마다 고유해야 하기 때문에 특정 요소를 빠르게 찾을 수 있어.

const title = document.getElementById("title");
title.style.color = "red"; // id가 "title"인 요소의 텍스트 색을 빨간색으로 변경

getElementsByClassName

getElementsByClassName은 class 속성을 가진 HTML 요소들을 선택해.
같은 클래스를 가진 요소가 여러 개 있을 수 있으니, 배열처럼 사용해야 해.
(왜 배열처럼 사용해야 하냐면
"item"이 여러 개니까, 하나씩 다루려면 순서를 써야 해.
이런 경우, for 같은 반복문으로 하나씩 꺼내서 처리해야 해!)

const items = document.getElementsByClassName("item");
for (let item of items) {
  item.style.color = "blue"; // 모든 "item" 클래스를 가진 요소의 텍스트 색을 파란색으로 변경
}

querySelector vs querySelectorAll

querySelector: 선택한 CSS 선택자에 해당하는 첫 번째 요소를 가져와.
querySelectorAll: 선택한 CSS 선택자에 해당하는 모든 요소를 가져와서 배열처럼 다룰 수 있어.
아래 예제를 통해 document.querySelector와 document.querySelectorAll의 동작을 자세히 설명하겠습니다.

예제 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    <div class="item">첫 번째 아이템</div>
    <div class="item">두 번째 아이템</div>
    <div class="item">세 번째 아이템</div>
</body>
</html>

JavaScript 코드

// 첫 번째 "item" 클래스를 가진 요소를 선택
const firstItem = document.querySelector(".item");
console.log(firstItem.textContent); // 결과: "첫 번째 아이템"

// 모든 "item" 클래스를 가진 요소를 선택 (NodeList 형태로 반환)
const allItems = document.querySelectorAll(".item");
allItems.forEach((item, index) => {
    console.log(`아이템 ${index + 1}: ${item.textContent}`);
});

실행 결과

document.querySelector(".item")
- .item 클래스를 가진 첫 번째 요소를 선택합니다.
- 결과: 첫 번째 아이템
document.querySelectorAll(".item")
- .item 클래스를 가진 모든 요소를 선택하여 NodeList 형태로 반환합니다.
- NodeList는 배열처럼 반복(iterable)할 수 있습니다.
- 각 요소의 textContent를 출력하면:
```
아이템 1: 첫 번째 아이템
아이템 2: 두 번째 아이템
아이템 3: 세 번째 아이템
```

요약

querySelector: 매칭되는 첫 번째 요소만 선택합니다.
querySelectorAll: 매칭되는 모든 요소를 선택하여 NodeList로 반환합니다.

참고

여기서 말하는 CSS 선택자는 HTML 요소를 찾는 방법이야.
CSS에서 스타일을 적용할 때 어떤 요소에 적용할지 정하는 규칙이 바로 "선택자"야.
자바스크립트의 querySelector와 querySelectorAll에서도 같은 방식으로 요소를 선택해.

여기서 CSS 선택자의 종류는?

태그 선택자: 태그 이름으로 선택
- 예: div, p, h1 등
- 사용: 페이지 안의 모든 해당 태그를 선택
```
document.querySelector("p"); // 첫 번째 <p> 태그
```
클래스 선택자: .(점)으로 클래스 이름을 선택
- 예: .my-class는 class="my-class"를 가진 요소를 선택
```
document.querySelector(".my-class"); // 첫 번째 "my-class" 클래스
```
ID 선택자: #으로 ID 이름을 선택
- 예: #my-id는 id="my-id"를 가진 요소를 선택
```
document.querySelector("#my-id"); // id="my-id"인 요소
```
조합 선택자: 여러 선택자를 조합해서 특정 요소를 선택
- 예: div.my-class는 <div> 태그 중 class="my-class"를 가진 것만 선택
```
document.querySelector("div.my-class"); // div 태그 중 class="my-class"인 첫 번째 요소
```

자식/후손 선택자: 계층 구조에 따라 선택

>: 바로 아래 자식
공백: 모든 후손

document.querySelector("div > p"); // div의 "직접 자식"인 <p> 태그
document.querySelector("div p");  // div 안의 모든 <p> 태그

결론
CSS 선택자 = "어떤 요소를 선택할지"를 정하는 규칙,
querySelector와 querySelectorAll은 이 규칙을 이용해 원하는 요소를 찾아오는 도구!

Node의 속성

Node는 DOM의 기본 단위인데, HTML 요소(태그), 속성, 텍스트 등을 포함해. 주요 속성들을 간단히 보면:

nodeName: 노드의 이름(예: DIV, SPAN)
nodeType: 노드가 어떤 종류인지 나타내는 숫자(예: 1은 요소, 3은 텍스트)
childNodes: 노드의 자식 노드 목록
parentNode: 노드의 부모 노드

const node = document.getElementById("title");
console.log(node.nodeName); // "H1"
console.log(node.parentNode); // 부모 요소

여기서 노드란?

HTML 문서를 "조각조각 나눈 기본 단위"라고 생각하면 돼.

웹 페이지에서 모든 것이 노드야!

HTML 태그도 노드
텍스트도 노드
주석도 노드

노드의 종류

요소 노드: HTML 태그 (예: < div >, < p >)
텍스트 노드: 태그 안에 들어있는 글자 (예: "안녕하세요")
주석 노드: HTML 주석 (예: < !-- 주석 -- >)

한마디로 정리:

DOM은 HTML 문서를 자바스크립트로 조작할 수 있는 도구야.
이벤트를 처리할 때는 EventListener를 쓰는 게 더 유연하고 안전해.
요소 선택은 getElementById, querySelector 등으로 쉽게 할 수 있어.
이벤트 루프는 자바스크립트가 효율적으로 작업을 처리하게 도와주는 시스템이야.

김서현

한양대 학생입니다. 서울캠입니다.

이전 포스트

HTML의 form

다음 포스트