11.1.3 웹페이지의 만능 탐지기 - querySelector라는 지혜로운 친구

📘 11.1.3 웹페이지의 만능 탐지기 - querySelector라는 지혜로운 친구

지금까지 우리는 웹페이지에서 요소를 찾는 두 가지 소중한 방법을 배웠어요. getElementById로 고유한 이름표를 가진 특별한 요소를 정확히 찾는 방법과, getElementsByClassName으로 같은 마음을 가진 여러 친구들을 한꺼번에 모으는 방법을 익혔죠. 마치 서로 다른 열쇠로 각각 다른 문을 여는 것처럼, 각자 고유한 방식으로 요소를 찾을 수 있게 되었어요.

이번 시간에는 이 모든 방법들을 하나로 아우르는 지혜로운 만능 친구를 소개해드리려고 해요. 바로 querySelector와 querySelectorAll이라는 놀라운 존재들이에요. 이 친구들은 마치 여러 악기를 모두 연주할 수 있는 재능 있는 음악가처럼, 하나의 방법으로 모든 종류의 요소 찾기를 할 수 있어요.

🧠 새로운 지혜의 언어 배우기

만능 탐지기와 함께하기 위해 알아야 할 새로운 단어들을 마음으로 이해해볼까요?

단어	마음으로 이해하기
CSS 선택자	요소를 찾는 아름다운 규칙이에요. #(ID), .(클래스), 태그명 등의 간단한 기호를 사용해요.
querySelector	CSS 선택자의 지혜를 빌려 조건에 맞는 첫 번째 요소만을 찾아주는 섬세한 친구예요.
querySelectorAll	CSS 선택자의 힘으로 조건에 맞는 모든 요소들을 따뜻한 목록으로 모아주는 친구예요.
요소 목록	querySelectorAll이 선물해주는 여러 요소들의 정돈된 모임이에요. 차례대로 만날 수 있어요.

CSS 선택자는 원래 웹페이지를 아름답게 꾸밀 때 사용하던 언어였어요. 하지만 이 언어가 너무나 직관적이고 편리해서, 자바스크립트에서도 요소를 찾을 때 사용하게 되었답니다.

✨ querySelector, 어떤 친구일까요?

querySelector는 웹 개발의 세계에서 지혜로운 번역가 같은 존재예요. 우리가 CSS의 아름다운 언어로 말하면, 그것을 자바스크립트가 이해할 수 있는 방식으로 번역해서 정확히 원하는 요소를 찾아주는 거죠.

이 친구의 가장 소중한 특징은 하나의 통일된 언어를 사용한다는 점이에요. 이전에는 ID를 찾을 때와 클래스를 찾을 때 서로 다른 말을 해야 했지만, 이제는 CSS 선택자라는 하나의 아름다운 언어로 모든 대화가 가능해졌어요.

또 다른 매력은 선택의 자유가 있다는 거예요. querySelector는 조건에 맞는 첫 번째 친구만 소개해주고, querySelectorAll은 조건에 맞는 모든 친구들을 소개해줘요. 상황에 따라 우리가 원하는 방식을 선택할 수 있어요.

무엇보다 이 친구들은 포용력이 뛰어나요. 어떤 방식으로 요소를 찾고 싶든, 어떤 조건이든 유연하게 받아들이고 최선을 다해서 도와줘요.

마음을 담은 비유: 동네 도서관의 지혜로운 사서님

querySelector를 더 쉽게 이해하기 위해 '동네 도서관의 지혜로운 사서님'을 상상해보세요.

어느 조용한 동네에 정말 큰 도서관이 있었어요. 이 도서관에는 수만 권의 책이 있었고, 각 책마다 서로 다른 분류 방법이 적용되어 있었어요. 어떤 책에는 고유 번호 스티커(ID), 어떤 책에는 주제별 색깔 스티커(클래스), 어떤 책에는 종류 표시 라벨(태그)이 붙어있었죠.

예전에는 도서관에 여러 명의 전문 사서가 있었어요. 한 분은 오직 고유 번호로만 책을 찾아주고, 다른 분은 주제별 색깔로만 책을 찾아주고, 또 다른 분은 책 종류로만 찾아주었어요. 이용자들은 찾고 싶은 책에 따라 다른 사서님을 찾아가야 했어요.

그런데 어느 날, 정말 지혜로운 사서님이 도서관에 오셨어요. 이 분은 하나의 간단한 규칙만 알려주면 어떤 방식으로든 책을 찾아주실 수 있었어요.

"#123번 책 찾아주세요"라고 하면 고유 번호 123번 책을 정확히 찾아주시고,
".요리 주제 책들 보여주세요"라고 하면 요리 관련 모든 책을 차례대로 나열해주시고,
"소설 한 권만 추천해주세요"라고 하면 소설 중에서 가장 앞에 있는 책을 추천해주셨어요.

더 놀라운 것은 두 가지 서비스 방식을 제공하신다는 점이었어요. "첫 번째 한 권만 찾아주세요"라고 하면 조건에 맞는 첫 번째 책만 가져다주시고, "조건에 맞는 책을 모두 찾아주세요"라고 하면 해당하는 모든 책을 목록으로 정리해주셨어요.

웹페이지도 바로 이런 지혜로운 도서관이에요! querySelector라는 똑똑한 사서님이 #(ID), .(클래스), 태그명이라는 간단한 언어만으로 우리가 원하는 모든 요소를 찾아주는 거예요.

🎯 왜 querySelector를 사랑하게 될까요?

이미 좋은 도구들이 있는데 왜 querySelector를 또 배워야 할까요? 정말 소중한 이유들이 있어요.

첫 번째는 통일성의 아름다움이에요. 이전에는 ID를 찾을 때와 클래스를 찾을 때 서로 다른 언어를 사용해야 했어요. 하지만 querySelector는 하나의 아름다운 언어로 모든 대화가 가능해요.

두 번째는 기억의 편안함이에요. 여러 개의 기능 이름을 외우느라 머리가 복잡했는데, 이제는 querySelector와 querySelectorAll만 기억하면 돼요.

세 번째는 일관성의 평화로움이에요. CSS 선택자라는 웹 개발의 표준 언어를 사용하기 때문에, 다른 곳에서 배운 지식을 그대로 활용할 수 있어요.

네 번째는 선택의 자유로움이에요. 상황에 따라 하나만 찾을지, 모두 찾을지 자연스럽게 선택할 수 있어서 코드가 더 명확하고 의도가 잘 드러나요.

⚙️ querySelector와 자연스럽게 대화하기

이 지혜로운 친구들과 대화하는 방법은 정말 우아해요. 마치 시를 읽는 것처럼 자연스러워요.

첫 번째 친구만 찾을 때:

let 소중한친구 = document.querySelector("선택자");

모든 친구들을 찾을 때:

let 친구들목록 = document.querySelectorAll("선택자");

주요 CSS 선택자의 아름다운 3가지:

// ID로 찾기 (# 기호의 특별함)
document.querySelector("#myButton");

// 클래스로 찾기 (. 기호의 포근함)
document.querySelector(".highlight");

// 태그로 찾기 (순수한 이름의 힘)
document.querySelector("button");

기존 방식과의 따뜻한 비교:

// 이전의 대화 방식
let element1 = document.getElementById("myId");
let element2 = document.getElementsByClassName("myClass");

// 새로운 통일된 대화 방식
let element1 = document.querySelector("#myId");
let element2 = document.querySelectorAll(".myClass");

여기서 중요한 건 CSS 선택자의 언어를 정확히 사용해야 한다는 거예요. ID에는 #의 날카로움, 클래스에는 .의 부드러움을 빼먹으면 전혀 다른 의미가 되어버려요.

🧪 함께 경험해보는 querySelector의 지혜로운 세계

이제 실제 예시를 통해서 이 지혜로운 친구들이 어떻게 우리를 도와주는지 차근차근 경험해볼까요?

🔹 첫 번째 경험: 다양한 CSS 선택자로 각각 다른 요소 만나기

ID, 클래스, 태그라는 세 가지 서로 다른 언어로 요소를 찾는 아름다운 경험을 해보겠어요.

// ID의 고유함으로 요소 찾기 (기존 getElementById와 같은 결과)
let pageTitle = document.querySelector("#mainTitle");
console.log("페이지의 소중한 제목:", pageTitle);

// 클래스의 공통성으로 첫 번째 요소만 찾기
let firstActionButton = document.querySelector(".actionButton");
console.log("첫 번째 액션 버튼:", firstActionButton);

// 태그의 순수함으로 첫 번째 요소 찾기
let firstParagraph = document.querySelector("p");
console.log("첫 번째 문단:", firstParagraph);

// 존재하지 않는 친구를 찾을 때의 겸손함
let notFound = document.querySelector("#nonExistent");
console.log("존재하지 않는 요소:", notFound);

이 과정에서 느낄 수 있는 것은 각 선택자마다 고유한 매력이 있다는 거예요. ID는 #의 날카로운 정확성, 클래스는 .의 포용적 따뜻함, 태그는 꾸밈없는 순수함을 가지고 있어요.

🔹 두 번째 경험: querySelectorAll로 모든 친구들과 함께하기

조건에 맞는 모든 요소들을 찾아서 따뜻한 목록으로 만드는 경험을 해보겠어요.

// 같은 클래스를 가진 모든 카드 친구들 찾기
let allCards = document.querySelectorAll(".card");
console.log("카드 친구들 총 " + allCards.length + "명과 만났어요");

// 모든 카드 친구들과 하나씩 인사하기
for (let i = 0; i < allCards.length; i++) {
    console.log((i + 1) + "번째 카드 친구:", allCards[i]);
}

// 페이지의 모든 버튼 친구들 찾기
let allButtons = document.querySelectorAll("button");
console.log("페이지의 모든 버튼 친구들 " + allButtons.length + "명");

// 첫 번째와 마지막 버튼 친구 확인하기
if (allButtons.length > 0) {
    console.log("첫 번째 버튼 친구:", allButtons[0]);
    console.log("마지막 버튼 친구:", allButtons[allButtons.length - 1]);
}

이 경험에서 배우는 것은 하나하나가 모두 소중한 만남이라는 거예요. 몇 명이 있든 상관없이, 찾은 모든 친구들과 정성스럽게 시간을 보낼 수 있어요.

🔹 세 번째 경험: 안전하고 따뜻한 사용법

친구가 없을 때도 실망하지 않고 현명하게 대처하는 방법을 배워보겠어요.

// 안전하고 따뜻한 단일 요소 찾기
function findElementGently(selector) {
    console.log("'" + selector + "' 선택자로 친구를 찾아보아요...");

    let element = document.querySelector(selector);

    if (element) {
        console.log("😊 좋은 소식이에요! 친구를 만났어요:", element);
        return element;
    } else {
        console.log("😔 아쉽지만 지금은 해당 친구를 만날 수 없어요.");
        console.log("💡 선택자 문법을 다시 한번 확인해보거나, 나중에 시도해볼까요?");
        return null;
    }
}

// 안전하고 따뜻한 여러 요소 찾기
function findAllElementsGently(selector) {
    console.log("'" + selector + "' 선택자로 모든 친구들을 찾아보아요...");

    let elements = document.querySelectorAll(selector);

    if (elements.length > 0) {
        console.log("😊 성공! " + elements.length + "명의 친구들을 만났어요.");
        return elements;
    } else {
        console.log("😌 아직 해당 친구들을 만나지 못했지만 괜찮아요.");
        return elements;
    }
}

// 함수들로 따뜻한 테스트하기
findElementGently("#submitButton");     // 존재할 수 있는 ID
findElementGently("#nonExistent");      // 존재하지 않는 ID
findAllElementsGently(".menuItem");     // 존재할 수 있는 클래스
findAllElementsGently(".notExist");     // 존재하지 않는 클래스

이 과정에서 배우는 것은 실패도 하나의 소중한 정보라는 거예요. 친구를 찾지 못했다고 해서 포기하는 것이 아니라, 그것도 의미 있는 결과로 받아들이며 다음을 준비하는 거죠.

🧚‍♀️ 마음을 담은 이야기: 마을 문화센터의 똑똑한 안내원

우리가 배운 내용을 따뜻한 이야기로 정리해보고 싶어요.

옛날 어느 작은 마을에 새로운 문화센터가 생겼어요.

이 문화센터는 정말 컸어요. 각 방마다 서로 다른 활동이 이루어졌고, 각 방에는 다양한 표시 방법이 있었어요. 어떤 방에는 특별한 방 번호(ID), 어떤 방에는 활동별 색깔 표시(클래스), 어떤 방에는 용도별 이름표(태그)가 붙어있었죠.

처음에는 문화센터에 여러 명의 안내원이 있었어요. 한 분은 오직 방 번호로만 안내해주고, 다른 분은 색깔 표시로만 안내해주고, 또 다른 분은 용도별로만 안내해주었어요. 방문객들은 찾고 싶은 방에 따라 다른 안내원을 찾아가야 했어요.

그런데 어느 날, 정말 똑똑한 안내원이 문화센터에 오셨어요. 이 분은 하나의 간단한 안내 시스템을 만드셨어요.

방문객이 "#301번 방으로 안내해주세요"라고 하면 301번 방으로 정확히 안내해주시고,
".요가 활동 방들을 보여주세요"라고 하면 요가 관련 모든 방의 목록을 알려주시고,
"강의실 하나만 추천해주세요"라고 하면 강의실 중에서 가장 가까운 곳을 추천해주셨어요.

더 놀라운 것은 두 가지 안내 방식을 제공하신다는 점이었어요. "첫 번째 방 하나만 안내해주세요"라고 하면 조건에 맞는 첫 번째 방만 안내해주시고, "조건에 맞는 방을 모두 안내해주세요"라고 하면 해당하는 모든 방을 차례대로 소개해주셨어요.

웹페이지도 바로 이런 똑똑한 문화센터예요! querySelector라는 지혜로운 안내원이 #(ID), .(클래스), 태그명이라는 간단한 언어만으로 우리가 원하는 모든 요소를 찾아주는 거예요.

🔄 querySelector 사용의 자연스러운 흐름

이 지혜로운 기능을 사용하는 과정을 자연스러운 흐름으로 정리해보면 이런 느낌이에요.

첫 번째 마음: 검색 방식에 대한 명상
ID, 클래스, 태그 중 어떤 방식으로 요소를 찾을지 마음속으로 정해보세요. 어떤 선택자가 가장 적절할지 고민하는 시간이에요.

두 번째 마음: 선택자 작성의 세심함
결정한 방식에 맞게 올바른 CSS 선택자를 정성스럽게 작성해보세요. ID는 #의 날카로움, 클래스는 .의 부드러움을 정확히 표현하는 거예요.

세 번째 마음: 기능 선택의 지혜
하나의 요소만 필요한 상황인지, 여러 요소가 필요한 상황인지 판단해서 querySelector나 querySelectorAll 중 하나를 선택해보세요.

네 번째 마음: 요소 검색의 실행
선택한 기능으로 실제 요소 검색을 실행하고, 그 결과를 변수에 소중히 보관해보세요.

다섯 번째 마음: 안전 확인의 배려
요소가 제대로 찾아졌는지 확인하고, 존재하지 않을 경우에도 따뜻하게 대처하여 프로그램이 안전하게 진행될 수 있도록 해보세요.

🧠 피하고 싶은 아쉬운 실수들

querySelector를 사용할 때 자주 발생하는 실수들을 미리 알고 있으면 더 안전한 프로그래밍을 할 수 있어요.

❌ 실수 1: CSS 선택자 기호의 실수나 누락

// 아쉬운 방법들
let element1 = document.querySelector("myButton");    // # 누락
let element2 = document.querySelector("highlight");   // . 누락
let element3 = document.querySelector("*myClass");    // 잘못된 기호

// 올바른 방법들
let element1 = document.querySelector("#myButton");   // ID는 # 필수
let element2 = document.querySelector(".highlight");  // 클래스는 . 필수
let element3 = document.querySelector("div");         // 태그는 순수하게

이런 실수가 일어나는 이유는 CSS 선택자의 아름다운 규칙을 정확히 기억하지 못하기 때문이에요. ID에는 #의 특별함, 클래스에는 .의 포용력이 필요해요.

❌ 실수 2: querySelector와 querySelectorAll의 혼동

// 아쉬운 사용 - 여러 요소가 있는데 querySelector 사용
let buttons = document.querySelector(".button");
console.log("버튼 수:", buttons.length);  // 에러가 나요!

// 올바른 사용 - 여러 요소를 원할 때는 querySelectorAll
let buttons = document.querySelectorAll(".button");
console.log("버튼 수:", buttons.length);  // 정상적으로 작동해요

querySelector는 첫 번째 친구만 소개해주기 때문에 length 속성이 없어요. 여러 친구들과 만나고 싶다면 반드시 querySelectorAll을 사용해야 해요.

❌ 실수 3: null 확인 없이 성급하게 사용하기

let element = document.querySelector("#nonExistent");
console.log("요소 내용:", element.textContent);  // 에러가 나요!

// 따뜻한 방법
let element = document.querySelector("#nonExistent");
if (element) {
    console.log("요소 내용:", element.textContent);
} else {
    console.log("요소를 찾을 수 없어요!");
}

존재하지 않는 요소를 찾으면 null이 돌아오는데, 이를 확인하지 않고 바로 사용하면 에러가 발생해요. 항상 존재 여부를 먼저 확인하는 예의를 지켜주세요.

🌸 따뜻한 연습으로 친해지기

배운 내용을 친근한 예제들로 천천히 연습해볼까요?

연습 1) 서로 다른 CSS 선택자로 각각의 요소와 첫 만남

// ID, 클래스, 태그를 사용해서 각각 하나씩 요소와 만나기
let headerTitle = document.querySelector("#pageHeader");
let firstCard = document.querySelector(".infoCard");
let firstButton = document.querySelector("button");

// 만난 친구들과 따뜻한 인사
console.log("🔍 ID로 만난 헤더 제목:", headerTitle);
console.log("🔍 클래스로 만난 첫 번째 카드:", firstCard);
console.log("🔍 태그로 만난 첫 번째 버튼:", firstButton);

// 모든 친구들과 제대로 만났는지 확인하기
if (headerTitle && firstCard && firstButton) {
    console.log("✨ 모든 친구들과 성공적으로 만났어요!");
} else {
    console.log("💭 일부 친구들을 아직 만나지 못했어요.");
}

이 연습을 통해 세 가지 다른 CSS 선택자의 아름다운 사용법과 안전한 확인 방법을 익힐 수 있어요.

연습 2) querySelectorAll로 여러 친구들과 함께 시간 보내기

// 같은 클래스를 가진 모든 메뉴 친구들 찾기
let menuItems = document.querySelectorAll(".menuItem");

console.log("🎯 메뉴 친구들 탐색 시작!");
console.log("총 " + menuItems.length + "명의 메뉴 친구를 만났어요.");

// 반복문으로 모든 메뉴 친구들과 차례대로 인사하기
for (let i = 0; i < menuItems.length; i++) {
    console.log("🎯 " + (i + 1) + "번째 메뉴 친구:", menuItems[i]);
    console.log("    → 안녕하세요, " + (i + 1) + "번째 자리의 친구!");
}

console.log("🌸 모든 메뉴 친구들과의 만남을 마쳤어요!");

이 문제를 통해 querySelectorAll과 반복문을 조합해서 여러 친구들과 체계적으로 시간을 보내는 방법을 연습할 수 있어요.

연습 3) 안전하고 따뜻한 친구 찾기 함수 만들기

// 안전하고 지혜로운 친구 찾기 함수
function safeQuerySelector(selector) {
    console.log("🌟 안전 탐색 모드! '" + selector + "' 선택자로 친구를 찾아보아요...");

    let element = document.querySelector(selector);

    if (element) {
        console.log("😊 기쁜 소식이에요! 친구를 만났어요.");
        return element;
    } else {
        console.log("😔 아쉽지만 지금은 해당 친구를 만날 수 없어요.");
        console.log("💡 선택자 문법을 다시 확인해보거나, 나중에 시도해볼까요?");
        return null;
    }
}

// 함수와 함께하는 따뜻한 테스트
safeQuerySelector("#realButton");    // 존재할 수 있는 요소
safeQuerySelector("#dreamButton");   // 존재하지 않는 요소

이 연습을 통해 함수를 활용한 재사용 가능한 안전한 코드 작성법을 익힐 수 있어요.

🤔 좀 더 깊이 생각해보기

기본 연습을 마쳤다면, 이제 조금 더 생각해볼 만한 질문들로 이해를 깊게 해보겠어요.

생각해보기 1: querySelector와 getElementById의 마음 깊은 차이점은?

따뜻한 답: querySelector는 CSS 선택자라는 아름다운 언어를 사용해서 ID, 클래스, 태그 등 다양한 방법으로 요소를 찾을 수 있지만, getElementById는 오직 ID라는 하나의 방법으로만 요소를 찾을 수 있어요.

마음을 담은 해설: querySelector는 하나의 기능으로 여러 방식의 검색이 가능한 만능 친구예요. getElementById("myId")와 querySelector("#myId")는 같은 결과를 주지만, querySelector는 추가로 .myClass나 button 같은 다른 방식의 아름다운 대화도 할 수 있어요.

생각해보기 2: 다음 코드에서 아쉬운 부분을 찾고 따뜻하게 고쳐보세요

let buttons = document.querySelector(".btn");
for (let i = 0; i < buttons.length; i++) {
    console.log("버튼:", buttons[i]);
}

따뜻한 답: querySelector는 첫 번째 친구만 소개해주므로 반복문을 사용할 수 없어요. 고친 코드는 이래요.

let buttons = document.querySelectorAll(".btn");
for (let i = 0; i < buttons.length; i++) {
    console.log("버튼:", buttons[i]);
}

마음을 담은 해설: 여러 친구들과 반복문으로 시간을 보내려면 querySelectorAll을 사용해야 해요. querySelector는 첫 번째 친구만 소개해주기 때문에 length 속성이 없고 반복문에 사용할 수 없어요.

🔄 지난 여행길 되돌아보기 - 소중한 기억들

잠깐, 우리가 함께 걸어온 길을 되돌아보며 이전에 배운 따뜻한 지식들을 다시 한번 마음에 새겨볼까요?

다시 만나는 친구 1: 클로저의 아름다운 기억력 (6단원 복습)

// 6단원에서 배운 클로저를 마음으로 활용하기
function createElementFinder() {
    let searchCount = 0;  // 검색 횟수를 기억하는 따뜻한 변수

    // 내부 함수가 외부 변수를 기억하는 클로저의 마법
    return function(selector) {
        searchCount++;  // 검색할 때마다 추억이 쌓여요
        console.log("🔍 " + searchCount + "번째 검색: " + selector);

        let element = document.querySelector(selector);

        if (element) {
            console.log("😊 요소를 만났어요!");
            return element;
        } else {
            console.log("😔 요소를 찾지 못했어요.");
            return null;
        }
    };
}

// 클로저를 활용한 따뜻한 요소 찾기 사용하기
let smartFinder = createElementFinder();  // 검색 함수 생성
smartFinder("#button1");   // 1번째 소중한 검색
smartFinder(".menu");      // 2번째 따뜻한 검색
smartFinder("p");          // 3번째 아름다운 검색

따뜻한 해설: 클로저를 사용하면 함수가 실행된 후에도 변수를 따뜻하게 기억할 수 있어요. 여기서는 searchCount 변수가 각 검색 함수마다 독립적으로 유지되면서 검색 횟수를 정확히 기록해요.

다시 만나는 친구 2: 반복문의 차근차근한 사랑 (4단원 복습)

// 4단원에서 배운 반복문을 마음으로 활용하기
function processAllButtons() {
    // 모든 버튼 친구들 찾기
    let allButtons = document.querySelectorAll("button");
    console.log("전체 버튼 친구 수: " + allButtons.length + "명");

    // for 반복문으로 각 버튼 친구와 시간 보내기
    for (let i = 0; i < allButtons.length; i++) {
        console.log((i + 1) + "번째 버튼 친구를 만나는 중...");
        console.log("이 친구는:", allButtons[i]);
    }

    console.log("모든 버튼 친구들과의 시간을 마쳤어요!");
}

// 반복문을 활용한 따뜻한 요소 처리 실행하기
processAllButtons();

따뜻한 해설: querySelectorAll로 찾은 친구들을 반복문으로 하나씩 정성스럽게 만날 수 있어요. 4단원에서 배운 for 반복문을 사용해서 각 요소에 차례대로 접근하고 따뜻한 시간을 보낼 수 있어요.

지금까지 querySelector와 querySelectorAll이라는 지혜로운 친구들과 함께 모든 종류의 요소 찾기 여행을 떠나봤어요. 이 친구들은 앞으로 여러분이 웹페이지에서 원하는 요소를 찾는 모든 상황에서 활용할 수 있는 강력하면서도 아름다운 도구가 될 거예요.

마치 마을 문화센터의 지혜로운 안내원처럼, 하나의 아름다운 언어로 모든 종류의 안내를 받을 수 있게 되었어요. 다음 시간에는 이렇게 찾은 소중한 요소들을 어떻게 아름답게 변화시킬 수 있는지 배워보겠어요!

✅ 오늘 나눈 소중한 이야기들

이번 시간에 함께 나눈 따뜻한 이야기들을 마음에 잘 간직하고 있는지 확인해보세요!

함께 배운 내용	마음에 담았나요?
querySelector의 지혜로운 개념	✅
CSS 선택자의 아름다운 언어	✅
다양한 요소를 찾는 통일된 방법	✅
피해야 할 아쉬운 실수들	✅
실제 예제를 통한 따뜻한 체험	✅

🎯 더 깊이 연습하고 싶은 마음을 위한 문제들

조금 더 연습하며 성장하고 싶은 분들을 위한 따뜻한 문제들이에요!

심화 문제 1. 다양한 CSS 선택자로 요소들과 만나보세요.

let title = document.querySelector("#main-title");
let button = document.querySelector(".primary");
let paragraph = document.querySelector("p");

console.log("제목:", title);
console.log("버튼:", button);
console.log("문단:", paragraph);

심화 문제 2. querySelectorAll을 사용해서 모든 친구들과 인사해보세요.

let items = document.querySelectorAll(".item");
console.log("항목 친구 수:", items.length);

for (let i = 0; i < items.length; i++) {
    console.log((i + 1) + "번째 항목 친구:", items[i]);
}

심화 문제 3. 요소 존재 여부를 확인하고 안전하게 만나보세요.

let saveBtn = document.querySelector(".save");
if (saveBtn) {
    console.log("저장 버튼 친구를 만났어요:", saveBtn);
} else {
    console.log("저장 버튼 친구를 아직 만나지 못했어요");
}

let allBtns = document.querySelectorAll(".btn");
console.log("버튼 친구 수:", allBtns.length);

심화 문제 4. querySelector와 getElementById의 마음 깊은 차이점은?

따뜻한 답: querySelector는 CSS 선택자(#, ., 태그명)라는 아름다운 언어를 사용해서 더 다양한 방법으로 요소를 찾을 수 있어요. getElementById는 오직 ID로만 찾을 수 있지만, querySelector는 ID, 클래스, 태그 등 여러 방법으로 찾을 수 있어요.

심화 문제 5. 다음 코드에서 아쉬운 부분을 찾고 따뜻하게 고쳐보세요.

let buttons = document.querySelector(".btn");
for (let i = 0; i < buttons.length; i++) {
    console.log(buttons[i]);
}

따뜻한 답: querySelector는 첫 번째 친구만 소개해주므로 length 속성이 없어요. 고친 코드:

let buttons = document.querySelectorAll(".btn");
for (let i = 0; i < buttons.length; i++) {
    console.log(buttons[i]);
}

📂 오늘의 따뜻한 마무리

오늘 함께 나눈 11.1.3 querySelector 이야기가 여러분의 마음에 따뜻하게 자리 잡았나요? 다음 시간에도 더 재미있고 유익한 내용으로 만나뵐게요!

마음에 새기기: 오늘 배운 내용을 꼭 직접 체험해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---