getElementById와 querySelector, innerHTML과 appendChild 활용법 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 JavaScript의 DOM 탐색과 수정에 대해 알아볼 거예요! DOM은 웹 개발의 기본 중 기본이라 할 수 있죠. 🏗️ 이를 잘 이해하면 HTML 문서를 자유자재로 조작할 수 있어요. 그래서 오늘은 getElementById, querySelector 같은 탐색 메서드와 innerHTML, appendChild 같은 수정 방법을 쉽고 재미있게 배워볼게요. 💡

---

📌 DOM 탐색: getElementById와 querySelector

1️⃣ getElementById

• 설명: 특정 ID를 가진 요소를 가져오는 메서드예요.
• 특징: ID는 문서 내에서 고유해야 하므로 한 번에 하나의 요소만 반환해요.
• 사용 예제:

// HTML 요소: <div id="myDiv">Hello, world!</div>
const myDiv = document.getElementById("myDiv");
console.log(myDiv.innerText); // 출력: Hello, world!

💡 Tip: 빠르고 간단하지만, ID를 정확히 알고 있어야 사용 가능해요.

---

2️⃣ querySelector

• 설명: CSS 선택자를 사용해 요소를 가져와요.
• 특징: 첫 번째로 매칭되는 요소만 반환해요.
• 사용 예제:

// HTML 요소: <div class="box">Box 1</div>
const box = document.querySelector(".box");
console.log(box.innerText); // 출력: Box 1

💡 Tip: ID, 클래스, 태그 이름 등 CSS 선택자를 자유롭게 활용할 수 있어요.

---

🛠️ DOM 수정: innerHTML과 appendChild

1️⃣ innerHTML

• 설명: 요소의 HTML 콘텐츠를 읽거나 변경할 때 사용해요.
• 사용 예제:

// HTML 요소: <div id="content">Old Content</div>
const content = document.getElementById("content");

// 콘텐츠 변경
content.innerHTML = "<p>New Content!</p>";
console.log(content.innerHTML); // 출력: <p>New Content!</p>

💡 Tip: innerHTML은 기존 콘텐츠를 모두 덮어쓰니 주의가 필요해요!

---

2️⃣ appendChild

• 설명: 요소에 새로운 자식 요소를 추가해요.
• 사용 예제:

// HTML 요소: <ul id="list"></ul>
const list = document.getElementById("list");
const newItem = document.createElement("li"); // 새로운 li 요소 생성

newItem.innerText = "새로운 항목";
list.appendChild(newItem); // li 요소를 ul에 추가
console.log(list.innerHTML);
// 출력: <li>새로운 항목</li>

💡 Tip: 기존 콘텐츠를 유지하면서 새 요소를 추가하고 싶을 때 유용해요!

---

😊 마무리하며..

DOM 탐색과 수정은 웹 개발에서 꼭 필요한 기술이에요. 마치 집 안에서 원하는 물건을 찾고, 새로운 장식을 추가하는 것과 같죠. 처음엔 익숙하지 않더라도, 코드를 자주 작성하다 보면 금방 익숙해질 거예요! 😊

여러분도 꼭 실습해 보세요!
궁금한 점이 있다면 언제든지 물어봐 주세요. 오늘도 화이팅입니다! 🚀