Session 4 최종 정리 📝

🎯 DOM 조작

💡 핵심: 이 3가지로 모든 DOM 조작 가능

innerText 텍스트 변경

element.innerText = "새로운 텍스트"; // 텍스트만 변경

innerHTML HTML 통째로 변경

element.innerHTML = "<div>새 HTML</div>"; // HTML
                  태그 포함

setAttribute 속성 변경 (class, src, hidden 등)

element.setAttribute("class", "bg-blue-500"); // 모든 속성
                  변경

📚 추가 참조 (자주 쓰는 편의 메서드)

classList.add("class-name") 클래스 추가

classList.remove("class-name") 클래스 제거

classList.toggle("class-name") 클래스 토글 (있으면 제거, 없으면 추가)

removeAttribute("속성명") 속성 제거

hasAttribute("속성명") 속성 존재 여부 확인

createElement("div") 새 요소 생성

appendChild(element) 자식 요소 추가

remove() 요소 삭제

⚡ Event (이벤트)

💡 핵심: 모든 사용자 입력은 이벤트

addEventListener("click", 함수)

element.addEventListener("click", () => {
  console.log("클릭됨!");
});

👆 click 이벤트가 가장 기본이자 핵심!

📚 추가 참조 (다양한 이벤트 타입)

click

클릭했을 때

input

입력 필드 값이 변경될 때

change

선택 값이 변경되고 포커스를 잃었을 때

submit

폼 제출 시

keydown

키를 눌렀을 때

keyup

키를 뗐을 때

mouseenter

마우스가 요소 위로 올라갈 때

mouseleave

마우스가 요소에서 벗어날 때

focus

입력 필드에 포커스가 갈 때

blur

입력 필드에서 포커스가 벗어날 때

scroll

스크롤할 때

load

페이지 로드 완료 시

🔥 핵심 패턴 정리

1. 선택 → 이벤트 → 조작

// 1. 선택
const button = document.querySelector("#button");

// 2. 이벤트
button.addEventListener("click", () => {
  // 3. 조작
  element.innerText = "변경됨";
});

2. 입력값 가져오기

const input = document.querySelector("#input");
const value = input.value; // 입력값 가져오기

3. 동적 요소 생성

const newDiv = document.createElement("div");
newDiv.innerText = "새 요소";
container.appendChild(newDiv);

4. 요소 삭제

element.remove(); // 요소 자체를 제거

🎉 축하합니다!

이제 DOM 조작과 이벤트의 핵심을 모두 배웠습니다.

💡 innerText, innerHTML, setAttribute로 모든 DOM 조작이 가능하고, addEventListener("click")로 모든 사용자 입력을 처리할 수 있습니다!

🚀 더 공부하면 좋은 JavaScript 개념

💡 아래 키워드들을 검색해서 스스로 공부해보세요!

📦 다양한 함수 작성법

화살표 함수

const add = (a, b) => a + b;

일반 함수

function add(a, b) { return a + b; }

익명 함수

setTimeout(function() { ... }, 1000);

🔁 다양한 반복문

for 문

for (let i = 0; i < 10; i++) { ... }

forEach

array.forEach(item => { ... });

map / filter

array.map(x => x * 2);

📋 배열 메서드

push 배열 끝에 추가

pop 배열 끝에서 제거

filter 조건에 맞는 것만 추출

find 조건에 맞는 첫 항목 찾기

🎁 객체 (Object)

const user = { name: "김철수", age: 20 };

Object.keys() 키 목록

Object.values() 값 목록

🔀 조건문

if / else

if (조건) { ... } else { ... }

삼항 연산자

조건 ? 참일때 : 거짓일때

⏱️ 비동기 처리

setTimeout 지연 실행

async / await 비동기 함수

fetch API 요청

💡 학습 팁: 위 키워드들을 구글에 검색할 때는 "JavaScript [키워드] MDN" 으로 검색하면 정확한 공식 문서를 찾을 수 있습니다!