querySelector() 메소드 완벽 가이드: JavaScript에서의 작동 방식과 활용법

JavaScript에서는 때때로 HTML 요소에 접근해야 할 필요가 있습니다. querySelector 메소드는 웹 API로, 전달된 CSS 선택자와 일치하는 첫 번째 요소를 선택합니다.

하지만 이것은 구체적으로 어떻게 작동할까요? 이 글에서는 querySelector 메소드와 querySelectorAll 메소드를 사용하는 여러 예제를 살펴볼 것입니다.

querySelector() 메소드의 기본 문법

querySelector 메소드는 document 객체에 대해 호출되며, 선택하고자 하는 요소의 CSS 선택자를 나타내는 인수를 받습니다.

document.querySelector(selector);

선택자가 문서 내의 요소와 일치하는 경우, 해당 메소드는 첫 번째 일치하는 요소를 반환합니다. 일치하는 요소가 없는 경우 메소드는 null을 반환합니다.

타입 선택자를 사용한 querySelector() 메소드 사용 방법

CSS에서 타입 선택자는 HTML 요소의 이름을 말합니다. 예를 들어 button, div, p 등이 이에 해당합니다.

첫 번째 예제에서, 우리는 HTML 문서 안에 버튼 요소가 있다고 가정합니다.

<button>Show Alert</button>

우리가 JavaScript 파일 안에서 이 요소에 접근하고 싶다면, querySelector 메소드를 다음과 같이 사용할 수 있습니다:

const buttonElement = document.querySelector("button");

이 코드 줄은 페이지에서 본 첫 번째 버튼을 선택하고, 그 결과를 buttonElement라는 const 변수에 할당합니다.

이 buttonElement 변수를 콘솔에 로그로 찍으면, 다음과 같은 출력이 나옵니다:

console.log(buttonElement);

우리는 이 buttonElement 변수를 사용하여 버튼이 클릭될 때 알림을 표시하는 이벤트 리스너를 추가할 수 있습니다.

buttonElement.addEventListener("click", () => {
  alert("Button was clicked!");
});

이는 플레이할 수 있는 전체 코드 및 상호작용식 예제입니다.

클래스 선택자를 사용한 querySelector() 메소드 사용 방법

CSS에서 클래스 선택자는 HTML 요소에서 사용된 클래스의 이름을 말합니다. 예를 들어 .container, .button 등이 있습니다.

예를 들어, 우리가 솔리테어 게임을 만들고자 하며 버튼을 클릭할 때 게임의 규칙을 표시하거나 숨기고 싶다고 가정해 봅시다. 우리는 querySelector 메소드를 사용하여 버튼과 규칙 컨테이너를 선택할 수 있습니다.

시작 HTML은 다음과 같습니다:

<h1>Let's play solitaire!</h1>
<main>
  <button class="rules-btn">Show Rules</button>
  <section class="rules-container">
    <h2>Rules to the game</h2>
    <ul>
      <li>There are 7 columns of cards</li>
      <li>First column has 1 card, second has 2, third has 3, and so on</li>
      <li>First card in each column is face up, rest are face down</li>
      <li>Move cards to build 4 stacks of cards in ascending order</li>
      <li>Start with aces and build up to kings</li>
      <li>Move cards by dragging and dropping</li>
    </ul>
  </section>
</main>

JavaScript 파일 안에서, 우리는 querySelector 메소드를 사용하여 규칙 버튼과 규칙 컨테이너를 선택할 수 있습니다.

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

그런 다음 우리는 규칙 컨테이너의 클래스에 “show” 클래스를 토글하는 classList 속성을 사용하여 rulesBtn 변수에 이벤트 리스너를 추가하여 버튼이 클릭될 때 규칙 컨테이너를 표시하거나 숨길 수 있습니다.

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
});

버튼을 클릭할 때 규칙 컨테이너가 표시되고 숨겨지는 상호작용식 예제입니다.

여기 전체 JavaScript 코드가 있습니다:

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
  rulesBtn.textContent = rulesContainer.classList.contains("show")
    ? "Hide Rules"
    : "Show Rules";
});

업데이트된 JavaScript 코드를 포함한 상호작용식 예제가 여기 있습니다.

querySelectorAll() 메소드 사용 방법

querySelectorAll 메소드는 querySelector 메소드와 유사하지만, 첫 번째 일치하는 요소가 아닌 일치하는 모든 요소의 NodeList를 반환합니다. NodeList는 지정된 선택자와 일치하는 모든 요소를 포함하는 배열과 유사한 객체입니다.

이 예제에서 우리는 스포츠의 비정렬된 목록이 있고, 각 목록 항목에 대해 무작위 배경색을 생성하고 싶습니다.

시작 HTML은 다음과 같습니다:

<button class="btn">Generate Random Background Colors</button>
<ul class="sports-list">
  <li>Football</li>
  <li>Basketball</li>
  <li>Tennis</li>
  <li>Golf</li>
  <li>Swimming</li>
</ul>

비정렬 목록 안의 모든 항목을 선택하려면, 우리는 querySelectorAll 메소드를 다음과 같이 사용할 수 있습니다:

const sportsList = document.querySelectorAll(".sports-list li");

sportsList 변수를 콘솔에 로그로 찍으면, 다음과 같은 출력이 나옵니다:

console.log(sportsList);

그런 다음 우리는 querySelector 메소드를 사용하여 버튼을 선택해야 합니다.

const randomColorBtn = document.querySelector(".btn");

그다음, 우리는 무작위 색상 목록을 생성할 수 있습니다.

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  "#FAFAD2",
  "#F0FFF0",
  "#E0FFFF",
  "#AFEEEE",
  "#00CED1",
  "#00BFFF",
  "#1E90FF",
  "#ADD8E6",
  "#7FFFD4",
  "#7CFC00",
  "#7FFF00",
  "#32CD32",
  "#ADFF2F",
  "#FFFF00",
  "#FFD700",
  "#FFA500",
  "#FF6347",
];

사용자가 버튼을 클릭할 때마다, 우리는 색상 목록을 섞고 배열에서 5가지 무작위 밝은 색상을 선택하고 싶습니다. 우리는 배열을 섞는 일반적인 방법인 Fisher-Yates 셔플 알고리즘을 사용할 수 있습니다.

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

그런 다음 버튼에 이벤트 리스너를 추가하고 배열을 섞을 수 있습니다.

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);
});

각 목록 항목에 대해, 우리는 섞인 배열에서 무작위 색상으로 배경색을 설정할 수 있습니다.

sportsList.forEach((list, index) => {
  list.style.backgroundColor = shuffledColors[index];
});

여기 전체 코드가 있습니다:

const sportsList = document.querySelectorAll(".sports-list li");
const randomColorBtn = document.querySelector(".btn");

console.log(sportsList);

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  "#FAFAD2",
  "#F0FFF0",
  "#E0FFFF",
  "#AFEEEE",
  "#00CED1",
  "#00BFFF",
  "#1E90FF",
  "#ADD8E6",
  "#7FFFD4",
  "#7CFC00",
  "#7FFF00",
  "#32CD32",
  "#ADFF2F",
  "#FFFF00",
  "#FFD700",
  "#FFA500",
  "#FF6347",
];

// fisher-yates shuffle algorithm

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);

  sportsList.forEach((list, index) => {
    list.style.backgroundColor = shuffledColors[index];
  });
});

완성된 JavaScript 코드를 포함한 상호작용식 예제는 버튼을 클릭하면 목록 항목이 무작위 배경색으로 변경됩니다.

결론

querySelector 및 querySelectorAll 메소드는 DOM에서 요소에 접근할 수 있게 해 주는 유용한 웹 API입니다. 이러한 메소드를 사용하면 타입, 클래스, id, 속성, 의사 클래스 및 의사 요소 선택자로 요소를 선택할 수 있습니다.

이러한 메소드를 실험해 보고 자신의 프로젝트에서 어떤 것을 만들 수 있는지 확인하시기 바랍니다.

이 글이 도움이 되었기를 바라며, 즐거운 코딩 되세요!