[JavaScript 문법] JQuery 선택자 (Selector)

자바스크립트를 공부하다 알게된 Selector! 이건 어떻게 사용할 수 있을까?  그리고 사용하는 이유는 뭐지? 

 

→ 웹 페이지에서 특정 HTML 요소를 찾아야 할 때 selector를 사용하여 해당 요소를 선택할 수 있다. 이를 통해 웹 페이지의 특정 부분에 접근하고 조작할 수 있다.

→ selector를 사용하면 여러 요소를 한 번에 선택하거나 특정 패턴을 따르는 요소를 쉽게 찾을 수 있으므로, 반복적인 작업을 간소화하고 코드를 더 효율적으로 작성할 수 있다. 그 외에도 이벤트처리나 스타일 변경 등 에도 사용가능하다. 

 

요약하면, JavaScript에서 selector를 사용하는 주요 이유는 웹 페이지의 구조와 콘텐츠에 접근하고 제어하여 동적인 웹 애플리케이션을 구축하고 사용자와 상호작용하는 것입니다.

 

아래는 Selector를 사용하는 예시들입니다.

 

HTML 요소 찾기와 텍스트 변경

//HTML
<div id="myElement">이 텍스트를 변경해보겠습니다.</div>

//JavaScript
// 요소를 ID로 선택하기
const element = document.getElementById("myElement");

// 선택한 요소의 텍스트 변경
element.textContent = "텍스트가 변경되었습니다.";

 

이벤트 처리

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

//JavaScript
// 버튼 요소를 선택하기
const button = document.getElementById("myButton");

// 버튼 클릭 이벤트 핸들러 등록
button.addEventListener("click", function() {
  alert("버튼이 클릭되었습니다.");
});

데이터 검색 및 조작 

//HTML
<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

//JavaScript
// 리스트 요소를 선택하기
const list = document.getElementById("myList");

// 리스트 항목들을 선택하고 조작
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
  items[i].textContent = "새로운 항목 " + (i + 1);
}

 

스타일 변경

//HTML
<div id="myDiv">이 div의 스타일을 변경해보겠습니다.</div>

//JavaScript
// div 요소를 선택하기
const div = document.getElementById("myDiv");

// 스타일 변경
div.style.backgroundColor = "lightblue";
div.style.fontSize = "20px";
div.style.padding = "10px";