[HTML/JavaScript] querySelector, getElementById, addEventListener

웹 개발에서 HTML 요소를 선택하고 조작하는 것은 매우 중요합니다. JavaScript에서는 querySelector, getElementById 등의 메서드를 사용하여 요소를 선택할 수 있으며, addEventListener를 활용하여 이벤트를 처리할 수 있습니다.

---

1. querySelector와 getElementById 비교

HTML 요소를 선택하는 대표적인 두 가지 방법은 querySelector와 getElementById입니다.

메서드	설명	사용 예제
getElementById	문서에서 id 속성을 가진 요소 하나를 선택	document.getElementById("myElement")
querySelector	CSS 선택자를 사용하여 첫 번째 요소를 선택	document.querySelector(".myClass")
querySelectorAll	CSS 선택자를 사용하여 모든 요소를 선택 (NodeList 반환)	document.querySelectorAll("p")

2. getElementById 사용 예제

getElementById는 특정한 id 속성을 가진 요소를 가져옵니다.

document.getElementById("btn").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

HTML 코드:

<button id="btn">클릭하세요</button>

3. querySelector 사용 예제

querySelector를 사용하면 CSS 선택자로 요소를 선택할 수 있습니다.

document.querySelector(".btn").addEventListener("click", function() {
    alert("클래스 선택자로 버튼을 클릭했습니다!");
});

HTML 코드:

<button class="btn">클릭하세요</button>

4. querySelectorAll로 여러 개 요소 선택

querySelectorAll을 사용하면 특정 CSS 선택자와 일치하는 모든 요소를 가져올 수 있습니다.

document.querySelectorAll(".item").forEach(item => {
    item.addEventListener("click", function() {
        alert("항목을 클릭했습니다: " + this.textContent);
    });
});

HTML 코드:

<ul>
    <li class="item">항목 1</li>
    <li class="item">항목 2</li>
    <li class="item">항목 3</li>
</ul>

5. addEventListener로 이벤트 처리

addEventListener를 사용하면 요소에 이벤트를 등록할 수 있으며, 여러 개의 이벤트 핸들러를 추가하는 것도 가능합니다.

document.getElementById("myButton").addEventListener("mouseover", function() {
    this.style.backgroundColor = "yellow";
});

document.getElementById("myButton").addEventListener("mouseout", function() {
    this.style.backgroundColor = "";
});

HTML 코드:

<button id="myButton">마우스를 올려보세요</button>

---

💡 결론

getElementById와 querySelector는 HTML 요소를 선택하는 중요한 메서드이며, addEventListener를 사용하여 다양한 이벤트를 처리할 수 있습니다.

이러한 메서드를 활용하면 HTML 요소를 조작하고 동적인 웹 페이지를 만들 수 있습니다. 🚀