11. 웹페이지 조종하기 (DOM 조작)/11.2 요소 조작하기

11.1.2 같은 마음을 가진 친구들 찾기 - getElementsByClassName과의 만남

thejavascript4kids 2025. 7. 15. 02:53

📘 11.1.2 같은 마음을 가진 친구들 찾기 - getElementsByClassName과의 만남

지난 시간에 우리는 getElementById라는 소중한 친구와 함께 웹페이지에서 고유한 이름표를 가진 요소를 정확히 찾는 방법을 배웠어요. 마치 큰 아파트 단지에서 정확한 호수를 찾는 것처럼, ID라는 특별한 주소로 단 하나의 요소를 찾을 수 있게 되었죠.

이번 시간에는 조금 다른 접근을 해보려고 해요. 때로는 하나의 특별한 친구가 아니라, 같은 마음을 가진 여러 친구들을 한꺼번에 만나고 싶을 때가 있잖아요? 바로 그런 마음으로 getElementsByClassName이라는 새로운 친구를 소개해드리려고 해요.

🧠 새로운 친구들과 마음 나누기

여러 요소를 함께 찾기 위해 알아야 할 새로운 단어들을 마음으로 이해해볼까요?

단어 마음으로 이해하기
클래스 (Class) HTML 요소들에게 붙여주는 공통된 성격표예요. 여러 요소가 같은 클래스를 나누어 가질 수 있어요.
getElementsByClassName 같은 클래스를 가진 모든 요소들을 찾아서 따뜻한 목록으로 만들어주는 기능이에요.
요소 목록 getElementsByClassName이 선물해주는 여러 요소들의 모임이에요. 마치 친구들이 한 줄로 서 있는 것 같아요.
순서 번호 목록에서 각 친구의 위치를 나타내는 번호예요. 0번부터 시작하는 게 약속이에요.

클래스는 "같은 종류, 같은 성격"을 의미하는 따뜻한 단어예요. HTML에서는 비슷한 역할을 하는 요소들을 하나의 클래스로 묶어서 관리할 때 사용해요.

✨ getElementsByClassName, 어떤 친구일까요?

getElementsByClassName은 웹 개발의 세계에서 단체 모임의 주최자 같은 역할을 해요. 혼자서는 외로울 수 있지만, 같은 관심사를 가진 사람들을 모아주면 더욱 풍성한 시간을 만들 수 있잖아요?

이 친구의 가장 특별한 점은 하나가 아닌 여러 개의 요소를 한번에 찾아준다는 거예요. getElementById가 한 명의 특별한 친구를 찾아주는 것이라면, getElementsByClassName은 같은 취미를 가진 여러 친구들을 모두 불러모아주는 거죠.

반환되는 결과는 배열처럼 정돈된 목록이에요. 첫 번째 친구는 0번 자리에, 두 번째 친구는 1번 자리에 앉아있어서 우리가 순서대로 만날 수 있어요.

무엇보다 이 친구는 너그러운 마음을 가지고 있어요. 찾는 클래스를 가진 요소가 하나도 없어도 화를 내지 않고, 조용히 빈 목록을 건네주면서 "아쉽지만 지금은 없네요"라고 알려줘요.

마음을 담은 비유: 동네 독서모임의 따뜻한 만남

getElementsByClassName을 더 쉽게 이해하기 위해 '동네 독서모임의 따뜻한 만남'을 상상해보세요.

어느 조용한 동네에 도서관 사서 선생님이 계셨어요. 이 선생님은 매주 토요일마다 다양한 독서모임을 주최하셨어요. 시 읽기 모임, 소설 읽기 모임, 에세이 읽기 모임 등등 여러 그룹이 있었죠.

각 모임에 참여하는 사람들은 같은 색깔의 독서 배지를 가방에 달고 다녔어요. 시 읽기 모임은 파란색, 소설 읽기 모임은 빨간색, 에세이 읽기 모임은 노란색 배지를 말이에요.

어느 토요일 오후, 사서 선생님이 도서관 입구에서 "파란색 배지를 달고 계신 분들, 2층 모임실로 올라와 주세요!"라고 안내방송을 했어요.

그러자 어떤 일이 일어났을까요? 도서관 곳곳에서 파란색 배지를 단 사람들이 하나둘씩 2층으로 올라오기 시작했어요. 1층에서 책을 고르던 분, 어린이 도서관에 있던 분, 카페에서 차를 마시던 분까지 모두 모였죠.

모임실에 도착한 사람들은 자연스럽게 한 줄로 앉았어요. 첫 번째 자리의 할머니, 두 번째 자리의 중학생, 세 번째 자리의 직장인... 선생님은 "오늘은 총 7분이 참석해주셨네요"라고 세어보고, 한 분 한 분께 따뜻한 인사를 건넬 수 있었어요.

웹페이지에서도 바로 이런 일이 일어나요! getElementsByClassName("poem-lovers")라고 하면, 웹페이지 곳곳에서 "poem-lovers" 클래스를 가진 모든 요소들이 목록이라는 모임실에 차례대로 모여서 우리를 기다리는 거예요.

🎯 왜 getElementsByClassName을 사랑하게 될까요?

이 기능을 사용하는 이유는 정말 따뜻하고 실용적이에요.

첫 번째는 효율적인 관리예요. 웹페이지에는 비슷한 일을 하는 요소들이 많아요. 여러 개의 버튼, 여러 개의 제목, 여러 개의 이미지들이 있을 수 있죠. 이런 친구들을 하나씩 찾는 것보다 한꺼번에 모아서 관리하는 것이 훨씬 마음도 편하고 효율적이에요.

두 번째는 일관된 처리예요. 같은 클래스를 가진 요소들은 보통 비슷한 성격을 가지고 있어요. 모든 버튼의 색깔을 같이 바꾸거나, 모든 제목의 크기를 함께 조절할 때 정말 유용해요.

세 번째는 유연한 적응력이에요. 페이지에 요소가 몇 개나 있는지 미리 알 필요 없이, 조건에 맞는 모든 요소를 자동으로 찾아줘요. 내일 요소가 하나 더 추가되어도, 모레 하나가 사라져도 자연스럽게 대응할 수 있어요.

네 번째는 포용력이에요. 찾는 클래스를 가진 요소가 아예 없어도 에러를 내지 않고, 조용히 빈 목록을 돌려주면서 "지금은 없지만 괜찮아요"라고 말해줘요.

⚙️ getElementsByClassName과 자연스럽게 대화하기

이 친구와 대화하는 방법은 정말 자연스러워요. 마치 독서모임 사회자에게 부탁하는 것처럼 쉬워요.

기본 대화 방식:

let 모인친구들 = document.getElementsByClassName("클래스이름");

실제 대화 예시:

let allButtons = document.getElementsByClassName("button");
let menuItems = document.getElementsByClassName("menu-item");
let highlights = document.getElementsByClassName("highlight");

목록에서 개별 친구와 만나기:

let firstButton = allButtons[0];      // 첫 번째 친구
let secondButton = allButtons[1];     // 두 번째 친구
let friendCount = allButtons.length;  // 전체 친구 수

기억할 소중한 특징들:

  • 결과는 항상 목록으로 와요 (혼자여도 목록이에요)
  • 찾는 친구가 없어도 빈 목록을 줘요 (null이 아니에요)
  • 친구들의 순서는 0번부터 시작해요
  • length로 전체 친구 수를 알 수 있어요

🧪 함께 경험해보는 getElementsByClassName의 따뜻한 세계

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

🔹 첫 번째 경험: 같은 마음을 가진 친구들과의 첫 만남

웹페이지에서 같은 클래스를 가진 여러 요소들을 찾아서 따뜻한 목록으로 만드는 경험을 해보겠어요.

// "important"라는 마음을 가진 모든 요소 찾기
let importantElements = document.getElementsByClassName("important");

// 찾은 친구들의 수 확인하기
console.log("소중한 요소들을 " + importantElements.length + "개 찾았어요");

// 친구들이 있다면 첫 번째 친구와 인사하기
if (importantElements.length > 0) {
    console.log("첫 번째 소중한 친구:", importantElements[0]);
    if (importantElements.length > 1) {
        console.log("두 번째 소중한 친구:", importantElements[1]);
    }
} else {
    console.log("아직 important 친구들을 찾을 수 없어요");
}

이 과정에서 느낄 수 있는 것은 하나하나가 모두 소중한 만남이라는 거예요. 몇 개가 있든 상관없이, 찾은 모든 요소들을 차례대로 만날 수 있어요.

🔹 두 번째 경험: 반복문으로 모든 친구들과 따뜻한 인사 나누기

찾은 여러 친구들을 반복문을 사용해서 하나씩 정성스럽게 만나는 경험을 해보겠어요.

// "menu-button"이라는 성격을 가진 모든 버튼 친구들 찾기
let menuButtons = document.getElementsByClassName("menu-button");

console.log("메뉴 버튼 친구들을 찾기 시작해요!");
console.log("총 " + menuButtons.length + "명의 메뉴 버튼 친구를 만났어요.");

// 모든 친구들과 하나씩 인사 나누기
for (let i = 0; i < menuButtons.length; i++) {
    console.log((i + 1) + "번째 메뉴 버튼 친구:", menuButtons[i]);
    console.log("  → 안녕하세요, " + (i + 1) + "번째 자리에 계신 친구!");
}

console.log("모든 메뉴 버튼 친구들과의 인사를 마쳤어요!");

이 경험에서 배울 수 있는 것은 차례차례 정성스럽게 만나는 마음이에요. 급하게 처리하지 않고, 각 친구와 개별적으로 시간을 보내면서 서로를 알아가는 거죠.

🔹 세 번째 경험: 친구가 없을 때도 따뜻하게 대하기

때로는 찾는 클래스를 가진 친구가 아무도 없을 수 있어요. 이럴 때도 실망하지 않고 현명하게 대처하는 방법을 배워보겠어요.

// 안전하고 따뜻한 친구 찾기 함수
function findFriendsKindly(className) {
    console.log("'" + className + "' 마음을 가진 친구들을 찾아볼게요...");

    let elements = document.getElementsByClassName(className);

    if (elements.length > 0) {
        console.log("😊 좋은 소식이에요! " + elements.length + "명의 친구를 만났어요.");
        console.log("첫 번째 친구:", elements[0]);

        // 친구들과 간단한 인사
        for (let i = 0; i < elements.length; i++) {
            console.log("  → " + (i + 1) + "번째 친구와 인사를 나누었어요");
        }

        return elements;
    } else {
        console.log("😔 아쉽지만 '" + className + "' 친구들을 지금은 만날 수 없어요.");
        console.log("💡 클래스 이름을 다시 한번 확인해보거나, 나중에 다시 시도해볼까요?");
        return null;
    }
}

// 여러 종류의 친구들 찾아보기
findFriendsKindly("content");      // 있을 수 있는 친구들
findFriendsKindly("special");      // 있을 수 있는 친구들  
findFriendsKindly("none-exist");   // 없는 친구들

이 과정에서 배우는 것은 실패도 하나의 소중한 정보라는 거예요. 친구를 찾지 못했다고 해서 포기하는 것이 아니라, "지금은 아니지만 언젠가는 만날 수 있겠구나"라는 희망을 가지는 거죠.

🧚‍♀️ 마음을 담은 이야기: 마을 축제의 따뜻한 준비

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

옛날 어느 작은 마을에서 일 년에 한 번 열리는 축제를 준비하고 있었어요.

마을 이장님은 축제를 성공적으로 치르기 위해 여러 준비위원회를 만들었어요. 꽃 장식 위원회, 음식 준비 위원회, 공연 준비 위원회, 청소 위원회 등등 말이에요.

각 위원회 사람들은 같은 색깔의 어깨띠를 둘렀어요. 꽃 장식 위원회는 분홍색, 음식 준비 위원회는 주황색, 공연 준비 위원회는 하늘색 어깨띠를 말이에요.

축제 준비가 한창일 때, 이장님이 마을 확성기를 통해 "분홍색 어깨띠를 두르신 꽃 장식 위원회 분들, 마을회관 앞으로 모여주세요!"라고 방송했어요.

그러자 마을 곳곳에서 분홍색 어깨띠를 두른 사람들이 하나둘씩 모여들기 시작했어요. 집에서 꽃을 준비하던 할머니, 논에서 벼를 베다가 온 아저씨, 아이들과 놀고 있던 엄마까지 모두 모였죠.

마을회관 앞에 도착한 사람들은 자연스럽게 한 줄로 서 있었어요. 이장님은 "오늘은 총 12분이 와주셨네요"라고 세어보고, 맨 앞의 할머니부터 차례대로 "첫 번째 분은 김 할머니, 두 번째 분은 박 아저씨"라고 정성스럽게 인사할 수 있었어요.

웹페이지도 바로 이런 마을 축제와 같아요. HTML 요소들은 각자 다른 일을 하고 있지만, 클래스라는 같은 색깔의 어깨띠를 두르고 있어요. getElementsByClassName이라는 이장님이 부르면, 같은 어깨띠를 두른 모든 요소들이 목록이라는 마을회관 앞에 차례대로 모이는 거죠.

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

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

첫 번째 마음: 누구를 만나고 싶은지 명확히 하기
"버튼들을 모두 바꾸고 싶어", "제목들을 다시 정리하고 싶어"처럼 구체적인 목표를 가져보세요. 어떤 클래스의 친구들과 만나고 싶은지 마음을 정하는 거예요.

두 번째 마음: 정확한 클래스 이름 확인하기
HTML 파일을 살펴보거나 개발자 도구를 사용해서 정확한 클래스 이름을 확인해보세요. 한 글자라도 다르면 친구들을 만날 수 없거든요.

세 번째 마음: getElementsByClassName으로 정중히 부탁하기
document.getElementsByClassName("정확한클래스이름") 형태로 웹페이지에게 정중히 부탁해보세요.

네 번째 마음: 결과를 따뜻하게 받아들이기
찾은 친구들의 목록을 변수에 소중히 보관하거나, 빈 목록을 받았다면 그것도 의미 있는 정보로 받아들여보세요.

다섯 번째 마음: 친구들과 안전하게 시간 보내기
친구들이 실제로 있는지 확인한 후에 만나는 습관을 들여보세요. 이런 배려가 안정적인 프로그램을 만드는 지름길이에요.

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

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

❌ 실수 1: 목록을 개별 요소처럼 사용하려고 하기

let buttons = document.getElementsByClassName("button");
console.log("버튼 내용:", buttons);  // 목록 전체가 나와요!

// 따뜻한 방법
console.log("첫 번째 버튼:", buttons[0]);
console.log("두 번째 버튼:", buttons[1]);
console.log("총 버튼 수:", buttons.length);

이런 실수가 일어나는 이유는 getElementsByClassName이 항상 목록을 돌려준다는 것을 깜빡하기 때문이에요. 혼자 있어도 목록 안에 혼자 들어있는 거예요.

❌ 실수 2: 친구 수 확인 없이 만나려고 하기

let elements = document.getElementsByClassName("nonexistent");
console.log("첫 번째 친구:", elements[0]);  // undefined가 나와요!

// 따뜻한 방법
if (elements.length > 0) {
    console.log("첫 번째 친구:", elements[0]);
} else {
    console.log("아직 친구들을 만날 수 없어요!");
}

존재하지 않는 클래스를 찾으면 빈 목록이 와요. 이를 확인하지 않고 바로 만나려고 하면 undefined라는 아쉬운 결과가 나와요.

❌ 실수 3: 반복문에서 잘못된 시작점 사용하기

let items = document.getElementsByClassName("item");
for (let i = 1; i <= items.length; i++) {  // 1부터 시작하는 실수!
    console.log("항목:", items[i]);
}

// 따뜻한 방법
for (let i = 0; i < items.length; i++) {
    console.log("항목:", items[i]);
}

목록의 순서 번호는 0부터 시작한다는 것을 잊어버리는 실수예요. 첫 번째 친구는 0번 자리에 앉아있어요.

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

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

연습 1) "highlight" 클래스 친구들과 첫 만남

// "highlight" 마음을 가진 친구들 찾기
let highlightElements = document.getElementsByClassName("highlight");

// 찾은 친구들 확인하기
console.log("✨ 하이라이트 친구들을 찾았어요! 총 " + highlightElements.length + "명");

// 친구들이 있다면 첫 번째 친구와 인사하기
if (highlightElements.length > 0) {
    console.log("🎯 첫 번째 하이라이트 친구:", highlightElements[0]);
    console.log("😊 반가워요! 함께 시간을 보내요!");
} else {
    console.log("💭 하이라이트 친구들을 아직 만나지 못했어요.");
}

이 연습을 통해 기본적인 사용법과 친구들의 존재를 확인하는 따뜻한 방법을 익힐 수 있어요.

연습 2) "menu-item" 친구들과 차례대로 인사하기

// "menu-item" 성격을 가진 모든 메뉴 친구들 찾기
let menuItems = document.getElementsByClassName("menu-item");

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("🎉 모든 메뉴 친구들과의 인사가 끝났어요!");

이 문제를 통해 반복문을 사용해서 여러 친구들과 체계적으로 만나는 따뜻한 방법을 연습할 수 있어요.

연습 3) 없는 친구들을 찾으며 배우는 지혜

// 존재하지 않는 클래스로 친구 찾기 시도
let emptyElements = document.getElementsByClassName("does-not-exist");

console.log("존재하지 않는 친구들을 찾아본 결과:");
console.log("친구 수:", emptyElements.length);

// 현명한 대처 방법
if (emptyElements.length === 0) {
    console.log("😌 괜찮아요! 지금은 해당 친구들이 없지만,");
    console.log("💡 언젠가는 만날 수 있을 거예요. 클래스 이름을 다시 확인해보아요!");
} else {
    console.log("😊 친구들을 찾았어요!");
}

이 연습을 통해 빈 결과도 소중한 정보라는 것과, 실망하지 않고 현명하게 대처하는 방법을 배울 수 있어요.

🤔 좀 더 깊이 생각해보기

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

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

따뜻한 답: getElementById는 특별한 한 명의 친구를 찾아주지만, getElementsByClassName은 같은 마음을 가진 여러 친구들을 목록으로 모아줘요.

마음을 담은 해설: 이 차이점은 정말 중요해요. ID는 세상에 하나뿐인 특별한 이름이라서 항상 한 명만 찾을 수 있지만, 클래스는 여러 친구들이 함께 나누어 가질 수 있는 공통된 성격이라서 여러 명이 나올 수 있어요.

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

let buttons = document.getElementsByClassName("btn");
console.log("버튼:", buttons);
console.log("첫 번째 버튼을 사용해요!");

따뜻한 답: 목록 전체를 출력하고 있고, 개별 친구에게 접근하지 않았어요. 고친 코드는 이래요.

let buttons = document.getElementsByClassName("btn");
console.log("총 버튼 수:", buttons.length);
if (buttons.length > 0) {
    console.log("첫 번째 버튼:", buttons[0]);
    console.log("첫 번째 버튼 친구를 만났어요!");
} else {
    console.log("버튼 친구들을 아직 만나지 못했어요!");
}

마음을 담은 해설: 원래 코드는 목록을 개별 친구처럼 대하려고 했어요. getElementsByClassName의 결과는 항상 목록이므로, 특정 친구를 만나고 싶다면 순서 번호로 접근해야 해요.

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

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

다시 만나는 친구 1: 객체의 따뜻한 메서드 만들기 (8단원 복습)

// 8단원에서 배운 객체 메서드를 마음으로 활용하기
let student = {
    name: "이영희",
    grade: 4,
    hobbies: ["독서", "그림그리기"],

    // 메서드: 자신을 소개하는 따뜻한 기능
    introduce: function() {
        console.log("안녕하세요! 저는 " + this.name + "이고, " + this.grade + "학년이에요.");
        console.log("취미는 " + this.hobbies[0] + "과(와) " + this.hobbies[1] + "이에요!");
    },

    // 메서드: 학년을 올리는 성장의 기능  
    growUp: function() {
        this.grade = this.grade + 1;
        console.log(this.name + "가 " + this.grade + "학년으로 성장했어요! 축하해요!");
    }
};

// 객체의 따뜻한 메서드들 사용해보기
student.introduce();  // 자기소개하기
student.growUp();     // 성장하기

따뜻한 해설: 객체 안에 정보(name, grade, hobbies)와 기능(introduce, growUp)을 함께 담아서 관련된 것들을 하나의 따뜻한 공간에서 관리할 수 있어요.

다시 만나는 친구 2: try...catch로 만드는 안전한 보호막 (10단원 복습)

// 10단원에서 배운 에러 처리를 마음으로 활용하기
function safeFindElements(className) {
    try {
        let elements = document.getElementsByClassName(className);

        if (elements.length > 0) {
            console.log("😊 성공: " + elements.length + "개의 '" + className + "' 친구를 만났어요!");
            return elements;
        } else {
            console.log("😔 아쉬움: '" + className + "' 친구들을 지금은 만날 수 없어요.");
            return null;
        }

    } catch (error) {
        console.log("😌 괜찮아요: " + error.message);
        console.log("💡 코드를 다시 한번 살펴보며 마음을 다잡아보아요!");
        return null;
    } finally {
        console.log("🌸 친구 찾기를 마쳤어요. 언제나 응원하고 있어요!");
    }
}

// 안전한 친구 찾기 사용해보기
safeFindElements("menu-item");     // 정상적인 경우
safeFindElements("non-existent");  // 친구가 없는 경우

따뜻한 해설: try...catch를 사용해서 예상치 못한 문제가 생겨도 프로그램이 멈추지 않고 따뜻하게 계속 진행될 수 있어요. 실패도 하나의 소중한 경험으로 받아들이는 거죠.

지금까지 getElementsByClassName이라는 소중한 친구와 함께 같은 마음을 가진 여러 요소들을 찾는 여행을 떠나봤어요. 이 친구는 앞으로 여러분이 웹페이지에서 비슷한 성격을 가진 요소들을 효율적으로 관리할 수 있게 도와주는 든든한 동반자가 될 거예요.

마치 마을 축제에서 같은 어깨띠를 두른 사람들을 모으는 것처럼, 웹페이지에서도 같은 클래스를 가진 요소들을 따뜻하게 모아서 함께 관리할 수 있게 되었어요. 다음 시간에는 이런 요소들을 어떻게 아름답게 변화시킬 수 있는지 배워보겠어요!

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

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

함께 배운 내용 마음에 담았나요?
getElementsByClassName의 따뜻한 개념 ✅
여러 친구들과 만나는 자연스러운 방법 ✅
목록을 다루는 지혜로운 방법 ✅
피해야 할 아쉬운 실수들 ✅
실제 예제를 통한 따뜻한 체험 ✅

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

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

심화 문제 1. "section-title" 클래스를 가진 친구들을 찾아서 수를 세어보세요.

let titles = document.getElementsByClassName("section-title");
console.log("제목 친구 수:", titles.length);
if (titles.length > 0) {
    console.log("첫 번째 제목 친구:", titles[0]);
}

심화 문제 2. 반복문을 사용해서 "action-btn" 클래스 친구들과 모두 인사해보세요.

let buttons = document.getElementsByClassName("action-btn");
for (let i = 0; i < buttons.length; i++) {
    console.log((i + 1) + "번째 버튼 친구:", buttons[i]);
}

심화 문제 3. 클래스 친구들이 있는지 확인하고 안전하게 만나보세요.

let infoElements = document.getElementsByClassName("info");
if (infoElements.length > 0) {
    console.log("info 친구들을 " + infoElements.length + "명 만났어요");
    console.log("첫 번째 정보 친구:", infoElements[0]);
} else {
    console.log("info 친구들을 아직 만나지 못했어요");
}

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

따뜻한 답: getElementById는 특별한 한 명의 친구를 찾아주지만, getElementsByClassName은 같은 성격을 가진 여러 친구들을 목록으로 모아줍니다. 따라서 getElementsByClassName의 결과는 순서 번호로 접근해야 해요.

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

let elements = document.getElementsByClassName("myClass");
console.log("요소:", elements);

따뜻한 답: 목록 전체가 아닌 특정 친구에게 접근해야 해요. 고친 코드:

let elements = document.getElementsByClassName("myClass");
if (elements.length > 0) {
    console.log("첫 번째 친구:", elements[0]);
    console.log("총 친구 수:", elements.length);
} else {
    console.log("친구들을 아직 만나지 못했어요");
}

📂 오늘의 따뜻한 마무리

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

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



🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'11. 웹페이지 조종하기 (DOM 조작) > 11.2 요소 조작하기' 카테고리의 다른 글

11.2.3 속성 바꾸기 - 요소의 이름표를 새로 붙이기  (0) 2025.07.15
11.2.2 스타일 바꾸기 - 웹페이지에 옷을 입혀주기  (0) 2025.07.15
11.2.1 웹페이지 글자의 마법사 - 텍스트를 바꾸는 따뜻한 기술  (0) 2025.07.15

'11. 웹페이지 조종하기 (DOM 조작)/11.2 요소 조작하기'의 다른글

  • 현재글11.1.2 같은 마음을 가진 친구들 찾기 - getElementsByClassName과의 만남

관련글

티스토리툴바