자바스크립트에서 HTML 요소를 선택하고(body 가져오기), 새로운 요소를 생성해서 추가하는 방법을 정리했다.
처음에는 "왜 querySelector()를 써야 하지?", "왜 appendChild()가 필요 하지?",
"그냥 div를 직접 만들면 안 돼?", "왜 for문을 써야 하고 if-else를 같이 써야 해?" 같은 생각이 들었다.
하지만 직접 코드를 분석하면서 이 코드를 이렇게 작성해야 하는 이유가 있었다..!
그래서 생각도 정리할겸 오답노트 형식으로 정리해 보았다! 🚀
📌 1. querySelector()와 appendChild()는 왜 필요할까?
자바스크립트로 HTML 문서를 조작하고 싶다라고 가정해보자.
그러면 <body> 안에 새로운 요소 (<div>)를 만들어 추가해야한다.
이때 사용하는 것이 바로 querySelector()와 appendChild() 이다.
❌ 내가 처음 했던 오해
"querySelector()는 변수를 선언하는 것과 비슷한 역할을 한다?"
"appendChild()는 변수를 선언하는 것처럼 작동해서 새로운 요소를 만드는 것이다?"
✅ 실제 개념
✔ querySelector('선택자') → HTML 문서에서 특정 요소를 찾아옴
✔ appendChild(새로운 요소) → 기존 HTML 요소에 새로운 요소를 추가함
📌 예제 1: querySelector()로 <body> 가져오기
<body>
<nav>
<a href="/">Home</a>
<a href="/page2.html" aria-current="page">Other page</a>
</nav>
<main>
<h1>My other page</h1>
</main>
</body>const body = document.querySelector('body'); // <body> 가져오기
console.log(body); // body 요소 확인✅ querySelector('body')는 <body> 태그를 찾아서 가져오는 역할을 함!
📌 예제 2: 새로운 <p> 태그를 body에 추가하기
const p = document.createElement('p'); // 새 <p> 요소 만들기
p.textContent = '새로운 문장이 추가됨!'; // <p> 안에 텍스트 넣기
body.appendChild(p); // <body> 안에 <p> 추가✅ 실행하면 <body> 안에 새로운 <p> 요소가 추가됨!
🔹 HTML 변경 전
<body>
<h1>My other page</h1>
</body>
🔹 HTML 변경 후 (appendChild 실행됨!)
<body>
<h1>My other page</h1>
<p>새로운 문장이 추가됨!</p>
</body>✅ 즉, appendChild()는 HTML에 새로운 요소를 추가하는 역할을 한다!
📌 2. for문을 사용해야 하는 이유
문자열 "0123456"을 사용해서 각 숫자가 적힌 div 요소를 만들어야 한다하자.
게다가 짝수 번째 div는 파란색(lightblue), 홀수 번째 div는 빨간색(lightcoral) 배경색을 가져야 한다.
❌ 내가 처음 했던 오해
"그냥 div를 하나씩 추가하면 되는 거 아닌가?"
const div1 = document.createElement('div');
div1.textContent = '0';
div1.style.backgroundColor = 'lightblue';
body.appendChild(div1);
const div2 = document.createElement('div');
div2.textContent = '1';
div2.style.backgroundColor = 'lightcoral';
body.appendChild(div2);
// ... 6개 더 만들어야 함 😵💫❌ 이렇게 하면 매우 비효율적..
✔ 코드가 길고 반복되는 작업이 많아짐
✔ 문자열이 길어질수록 div를 직접 추가하는 것은 불가능
➡️ 그래서 for문을 사용하면 반복적인 작업을 자동화할 수 있다는걸 알았다!
📌 3. for문을 사용해서 자동화하기
let str = '0123456';
const body = document.querySelector('body');
function createDiv(content, backgroundColor) {
const div = document.createElement('div'); // 새 div 요소 생성
div.textContent = content; // 숫자 넣기
div.style.backgroundColor = backgroundColor; // 배경색 설정
div.style.padding = '10px 20px';
div.style.margin = '5px 2px 3px 8px';
div.style.color = 'white';
body.appendChild(div); // body에 div 추가
}
for (let i = 0; i < str.length; i++) {
let color;
if (i % 2 === 0) {
color = "lightblue"; // 짝수 인덱스 배경색
} else {
color = "lightcoral"; // 홀수 인덱스 배경색
}
createDiv(str[i], color);
}
✅ 이제 단 몇 줄의 코드로 div를 반복 생성할 수 있음
✅ 문자열이 길어져도 자동으로 div를 만들어줌
textContent는 HTML 요소 안에 텍스트를 넣는 속성이다.
즉, div.textContent = content;는 div 안에 content 값을 표시하라는 의미다.
예를 들어, content가 'Hello'라면
가 화면에 출력된다.
for문에서 str[i] 값을 content로 전달하면, div.textContent = content;를 통해 각 숫자가 div 안에 들어간다.
즉, "0123456" 문자열의 각 문자가 div 요소로 만들어져 화면에 표시되는 것이다.
이를 활용하면 반복문을 통해 여러 개의 div를 자동으로 생성할 수 있다.🚀
✅ textContent를 사용하면 HTML 요소 안에 원하는 텍스트를 쉽게 추가할 수 있음
✅ for문과 함께 사용하면 문자열의 각 문자를 div 요소로 자동 생성할 수 있음
📌 4. 그렇다면 if-else는 왜 필요할까?
if (i % 2 === 0) {
div.style.backgroundColor = "lightblue"; // 짝수 배경색
} else {
div.style.backgroundColor = "lightcoral"; // 홀수 배경색
}
i % 2 === 0은 i를 2로 나눈 나머지가 0인지 확인하는 조건이다.
나머지가 0이면 i는 짝수, 0이 아니면 홀수로 판단할 수 있다.
이를 활용하면 짝수와 홀수를 구별하여 서로 다른 스타일을 적용할 수 있다. 🚀
✔ i % 2 === 0 → 짝수 (0, 2, 4, 6) → lightblue 배경
✔ i % 2 !== 0 → 홀수 (1, 3, 5) → lightcoral 배경
✅ 즉, if-else를 통해 짝수와 홀수의 배경색을 다르게 설정할 수 있음!
📌 5. 최종 정리
| 개념 | 설명 |
| querySelector() | HTML 요소를 가져와서 조작할 수 있도록 함 (body 가져오기) |
| createElement() | 새로운 HTML 요소(div)를 생성함 |
| appendChild() | 생성한 div를 <body>에 추가하여 화면에 표시함 |
| for문 | 문자열의 각 문자(str[i])를 반복하면서 div를 생성 |
| if-else | i가 짝수인지 홀수인지 판별하여 배경색을 다르게 설정 |
✅ 이제 querySelector(), appendChild(), for문, if-else의 역할을 이해했다!!(완벽하진않지만,,) 🚀🔥
'코딩이야기𖦹 > 오답노트' 카테고리의 다른 글
| 📝 [250404/오답노트] - React filter와 map 제대로 쓰기 (2) | 2025.04.05 |
|---|---|
| 📝 [250321~0325/오답노트] 자바스크립트 4일 걸린 계산기 만들며 겪은 오답노트 (2) | 2025.03.27 |
| 📝 [250320/오답노트] 사용자 정보 저장 & 필터링 과제 피드백 정리 (0) | 2025.03.22 |
| 📝 [250318/오답노트] 자바스크립트 객체 & 생성자 함수, 그리고 타이머 실수 정리 (1) | 2025.03.18 |
| 📝 [250317/오답노트] 자바스크립트 addEventListener(), parseInt(), classList.add('클래스명') 정리 (0) | 2025.03.17 |
