📘 11.1.1 웹페이지 속 보물 찾기 - getElementById와의 첫 만남
지금까지 우리는 자바스크립트의 기본기를 차근차근 익혀왔어요. 변수라는 상자에 값을 넣고, 함수라는 도우미를 만들어 일을 시키고, 조건문으로 갈래길을 나누며 프로그래밍의 기초를 단단히 다졌죠. 이제는 그 모든 지식을 모아서 정말 흥미진진한 새로운 여행을 떠날 시간이에요.
바로 웹페이지와 마음을 나누는 방법을 배우는 거예요. 지금까지는 콘솔창에서만 결과를 확인했다면, 이제는 우리 눈앞에 펼쳐진 웹페이지 그 자체를 만지고 변화시킬 수 있게 될 거예요. 그 첫 걸음으로, 웹페이지에서 원하는 요소를 정확히 찾아내는 getElementById라는 소중한 친구를 만나보려고 해요.
🧠 새로운 세상의 언어 배우기
웹페이지와 대화하기 위해 알아야 할 새로운 단어들을 마음으로 이해해볼까요?
| 단어 | 마음으로 이해하기 |
|---|---|
| DOM | 웹페이지의 모든 요소들이 자바스크립트와 친구가 될 수 있게 연결해주는 다리예요. |
| HTML 요소 | 웹페이지를 이루는 하나하나의 부품들이에요. 제목, 버튼, 글상자 모두가 소중한 요소들이죠. |
| ID | HTML 요소에게 붙여주는 특별한 이름표예요. 전 세계에 단 하나뿐인 고유한 이름이에요. |
| getElementById | ID라는 이름표를 보고 웹페이지 속에서 원하는 요소를 찾아주는 훌륭한 탐지기예요. |
DOM은 "Document Object Model"이라는 정식 이름을 가지고 있지만, 우리에게는 웹페이지와 자바스크립트를 이어주는 따뜻한 다리 역할을 해주는 친구예요.
✨ getElementById, 어떤 친구일까요?
getElementById는 웹 개발의 세계에서 가장 믿음직한 친구 중 하나예요. 마치 시장 골목에서 "김 씨네 떡집 어디 있어요?"라고 물어보면 정확히 그 가게로 안내해주는 친절한 할머니 같은 존재예요.
이 친구의 가장 소중한 특징은 ID라는 유일한 이름표를 사용한다는 거예요. 우리 모두에게 주민등록번호가 하나씩만 있는 것처럼, 웹페이지의 각 요소도 ID를 하나씩만 가질 수 있어요. 그래서 getElementById는 실수할 일이 거의 없어요.
또 다른 매력은 빠르고 정확한 찾기 능력이에요. 웹페이지에 요소가 수백 개, 수천 개가 있어도 ID만 알면 단숨에 찾아낼 수 있어요. 마치 도서관에서 도서 번호만 알면 바로 그 책을 찾을 수 있는 것과 같아요.
무엇보다 getElementById는 안전한 친구예요. 만약 찾는 ID가 없으면 에러를 내며 화를 내는 대신, 조용히 null이라는 신호를 보내서 "죄송해요, 찾을 수 없어요"라고 알려줘요.
마음을 담은 비유: 동네 구멍가게의 친절한 사장님
상상해보세요. 어릴 적 동네에 있던 작은 구멍가게를 말이에요.
그 가게 사장님은 정말 대단했어요. 가게 안에 수백 가지 물건이 있었지만, 손님이 "빵빠레 하나 주세요"라고 하면 단숨에 정확한 자리로 가서 빵빠레를 꺼내주셨어요. "우유 하나 주세요"라고 하면 역시 정확히 우유를 찾아주셨죠.
만약 "아이스크림 하나 주세요"라고 했는데 그 가게에 아이스크림이 없다면, 사장님은 화를 내지 않고 "죄송해요, 지금 아이스크림은 없어요"라고 친절하게 말씀해주셨어요.
getElementById도 바로 이런 친절한 사장님과 같아요. 웹페이지라는 가게에서 우리가 "이런 ID를 가진 요소 하나 주세요"라고 하면, 정확히 그 요소를 찾아주거나, 없으면 "없어요(null)"라고 정직하게 알려주는 거예요.
🎯 왜 getElementById를 사랑하게 될까요?
웹 개발을 하는 사람들이 getElementById를 특별히 아끼는 이유가 있어요.
첫 번째는 확실함이에요. ID는 페이지에서 단 하나뿐이기 때문에, 우리가 찾는 요소가 정확히 어떤 것인지 절대 헷갈릴 일이 없어요. 마치 사람의 이름을 부르면 그 사람만 돌아보는 것처럼 말이에요.
두 번째는 빠름이에요. 컴퓨터가 ID로 요소를 찾는 속도는 정말 빨라요. 마치 책의 목차를 보고 원하는 페이지로 바로 넘어가는 것처럼, 불필요한 시간을 들이지 않아요.
세 번째는 쉬움이에요. 복잡한 설정이나 어려운 조건 없이, ID 이름만 알면 바로 사용할 수 있어요. 초보자도 금방 익힐 수 있는 친근한 방법이에요.
네 번째는 안전함이에요. 찾는 ID가 없어도 프로그램이 멈추거나 깨지지 않아요. 대신 null이라는 신호를 보내서 우리가 적절히 대처할 수 있게 해줘요.
⚙️ getElementById와 대화하는 방법
getElementById와 대화하는 방법은 정말 자연스러워요. 마치 친구에게 부탁하는 것처럼 쉬워요.
기본 대화 방식:
let 찾은요소 = document.getElementById("찾을ID이름");실제 대화 예시:
let myButton = document.getElementById("clickButton");
let myTitle = document.getElementById("pageTitle");
let myMessage = document.getElementById("welcomeText");대화의 구성 요소:
document는 현재 열려있는 웹페이지를 의미해요getElementById()는 ID로 요소를 찾아달라는 부탁이에요"ID이름"은 찾고 싶은 요소의 이름표예요- 찾은 요소는 변수에 보관해서 나중에 사용할 수 있어요
여기서 중요한 건 ID 이름을 꼭 따옴표로 감싸야 한다는 거예요. 그리고 대소문자를 정확히 맞춰야 해요. 컴퓨터는 'Button'과 'button'을 전혀 다른 것으로 생각하거든요.
🧪 함께 경험해보는 getElementById의 세계
이제 실제 예시를 통해서 getElementById가 어떻게 우리를 도와주는지 차근차근 경험해볼까요?
🔹 첫 번째 경험: 웹페이지 요소들과 첫 인사
웹페이지의 여러 요소들을 하나씩 찾아서 변수에 소중히 보관하는 방법을 알아보겠어요.
// 페이지의 중요한 제목 찾기
let mainTitle = document.getElementById("pageTitle");
console.log("소중한 제목을 찾았어요:", mainTitle);
// 사용자가 클릭할 버튼 찾기
let submitButton = document.getElementById("submitButton");
console.log("버튼을 찾았어요:", submitButton);
// 메시지를 보여줄 따뜻한 공간 찾기
let messageArea = document.getElementById("messageBox");
console.log("메시지 공간을 찾았어요:", messageArea);이 과정에서 느낄 수 있는 것은 각각의 요소가 모두 다른 개성을 가지고 있다는 거예요. 제목은 제목만의 역할이 있고, 버튼은 버튼만의 역할이 있죠. getElementById는 이런 개성 있는 요소들을 하나하나 정확히 찾아서 우리에게 소개해줘요.
🔹 두 번째 경험: 없는 친구를 찾을 때의 지혜
때로는 우리가 찾는 ID가 실제로는 존재하지 않을 수 있어요. 이럴 때 어떻게 현명하게 대처할지 알아보겠어요.
// 실제로 존재하는 요소 찾아보기
let realElement = document.getElementById("userInput");
console.log("실제 요소:", realElement);
// 존재하지 않는 ID로 찾아보기
let missingElement = document.getElementById("nonExistentElement");
console.log("없는 요소:", missingElement);
// 현명한 확인과 대처
if (missingElement === null) {
console.log("😔 아쉽게도 요소를 찾을 수 없어요. ID를 다시 한번 확인해주세요!");
} else {
console.log("😊 요소를 성공적으로 찾았어요!");
}이 경험을 통해 배울 수 있는 것은 실패도 하나의 소중한 정보라는 거예요. null을 받았다고 해서 실망할 필요는 없어요. 대신 "아, 이 ID는 없구나"라는 걸 알고 다른 방법을 생각해볼 수 있거든요.
🔹 세 번째 경험: 여러 요소들을 체계적으로 관리하기
실제 웹사이트에서는 여러 요소를 동시에 관리해야 할 때가 많아요. 이를 체계적으로 처리하는 방법을 경험해보겠어요.
// 사용자 정보와 관련된 모든 요소들 찾기
function findUserElements() {
console.log("사용자 관련 요소들을 찾기 시작해요...");
let nameInput = document.getElementById("userName");
let ageInput = document.getElementById("userAge");
let emailInput = document.getElementById("userEmail");
let submitBtn = document.getElementById("submitData");
// 각 요소의 상태를 따뜻하게 확인하기
if (nameInput !== null) {
console.log("이름 입력창: 잘 찾았어요 ✨");
} else {
console.log("이름 입력창: 찾을 수 없어요 💭");
}
if (ageInput !== null) {
console.log("나이 입력창: 잘 찾았어요 ✨");
} else {
console.log("나이 입력창: 찾을 수 없어요 💭");
}
if (emailInput !== null) {
console.log("이메일 입력창: 잘 찾았어요 ✨");
} else {
console.log("이메일 입력창: 찾을 수 없어요 💭");
}
if (submitBtn !== null) {
console.log("제출 버튼: 잘 찾았어요 ✨");
} else {
console.log("제출 버튼: 찾을 수 없어요 💭");
}
console.log("모든 요소 찾기를 마쳤어요!");
}
// 함수를 실행해서 경험해보기
findUserElements();이 과정에서 느낄 수 있는 것은 체계적인 접근의 소중함이에요. 하나하나 차근차근 확인하면서 전체적인 상황을 파악하는 거죠. 이런 습관은 나중에 더 복잡한 프로젝트를 다룰 때 정말 유용해요.
🧚♀️ 마음을 담은 이야기: 우체부의 정확한 배달
우리가 배운 내용을 따뜻한 이야기로 정리해보고 싶어요.
옛날 어느 작은 마을에 정말 성실한 우체부 할아버지가 계셨어요.
이 마을은 꽤 컸어요. 골목이 여러 개 있고, 각 골목마다 집들이 빼곡히 들어서 있었죠. 하지만 우체부 할아버지는 한 번도 편지를 잘못 배달한 적이 없으셨어요. 그 비결이 무엇일까요?
바로 집집마다 붙어있는 고유한 주소를 완벽히 기억하고 계셨기 때문이에요. "○○동 123번지"라고 적힌 편지를 받으면, 할아버지는 정확히 그 주소의 집으로 가서 편지를 전해주셨어요.
만약 편지에 적힌 주소가 실제로 없는 곳이라면, 할아버지는 화를 내지 않고 발송인에게 돌아가서 "이런 주소는 없어요"라고 친절하게 알려주셨어요.
getElementById도 바로 이런 우체부 할아버지와 같아요. 웹페이지라는 마을에서 ID라는 주소를 보고 정확한 요소를 찾아주거나, 없으면 정직하게 "없어요(null)"라고 알려주는 거예요.
🔄 getElementById 사용의 자연스러운 흐름
getElementById를 사용하는 과정을 자연스러운 흐름으로 정리해보면 이런 느낌이에요.
첫 번째 마음: 무엇을 찾고 싶은지 명확히 하기
"이 버튼을 조작하고 싶어", "저 제목을 바꾸고 싶어"처럼 구체적인 목표를 가져보세요. 목표가 명확하면 어떤 ID를 찾아야 할지도 자연스럽게 떠올릴 수 있어요.
두 번째 마음: 정확한 ID 이름 확인하기
HTML 파일을 살펴보거나 개발자 도구를 사용해서 정확한 ID 이름을 확인해보세요. 한 글자라도 틀리면 찾을 수 없거든요.
세 번째 마음: getElementById로 정중히 부탁하기document.getElementById("정확한ID이름") 형태로 웹페이지에게 정중히 부탁해보세요.
네 번째 마음: 결과를 소중히 받아들이기
찾은 요소를 변수에 보관하거나, null을 받았다면 그것도 소중한 정보로 받아들여보세요.
다섯 번째 마음: 안전하게 확인하고 사용하기
요소가 실제로 존재하는지 확인한 후에 사용하는 습관을 들여보세요. 이런 신중함이 안정적인 프로그램을 만드는 지름길이에요.
🧠 피하고 싶은 흔한 실수들
getElementById를 사용할 때 자주 발생하는 실수들을 미리 알고 있으면 더 안전한 프로그래밍을 할 수 있어요.
❌ 실수 1: ID 이름의 옷(따옴표) 깜빡하기
// 아쉬운 방법
let element = document.getElementById(myButton); // 에러 발생!
// 올바른 방법
let element = document.getElementById("myButton");ID 이름은 글자이기 때문에 꼭 따옴표라는 옷을 입혀줘야 해요. 따옴표가 없으면 컴퓨터는 myButton을 변수 이름으로 착각하게 돼요.
❌ 실수 2: 대소문자의 까다로운 성격 무시하기
// HTML에서는 id="submitButton"인데
let button = document.getElementById("submitbutton"); // 소문자로 실수
console.log(button); // null이 나와요컴퓨터는 'B'와 'b'를 완전히 다른 글자로 생각해요. HTML에서 정의한 ID와 자바스크립트에서 찾는 ID가 대소문자까지 정확히 같아야 해요.
❌ 실수 3: null 확인 없이 성급하게 사용하기
let element = document.getElementById("nonExistent");
// element가 null인지 확인하지 않고 바로 사용
console.log(element.textContent); // 에러가 나요!존재하지 않는 ID를 찾으면 null이 반환되는데, 이를 확인하지 않고 바로 사용하면 에러가 발생해요. 항상 사용하기 전에 존재하는지 확인하는 예의를 지켜주세요.
🌸 따뜻한 연습으로 익숙해지기
배운 내용을 따뜻한 마음으로 연습해볼까요? 어려운 문제가 아니라 친근한 예제들로 천천히 익혀보겠어요.
연습 1) "welcome"이라는 ID를 가진 요소와 인사하기
// "welcome" ID를 가진 요소 찾아보기
let welcomeElement = document.getElementById("welcome");
console.log("환영 요소를 찾았어요:", welcomeElement);
// 요소와 제대로 만났는지 확인하기
if (welcomeElement !== null) {
console.log("🎉 반가워요! 환영 요소와 성공적으로 만났어요!");
} else {
console.log("💭 아쉽게도 환영 요소를 찾을 수 없어요.");
}이 연습을 통해 getElementById의 기본적인 사용법과 결과 확인 방법을 자연스럽게 익힐 수 있어요.
연습 2) 여러 친구들과 동시에 만나기
// 웹페이지의 여러 요소들과 인사하기
console.log("여러 요소들을 찾아서 인사해볼게요:");
let headerElement = document.getElementById("header");
let footerElement = document.getElementById("footer");
let menuElement = document.getElementById("menu");
// 각 요소와의 만남 결과 확인하기
if (headerElement !== null) {
console.log("머리글 요소: 잘 만났어요 😊");
} else {
console.log("머리글 요소: 만날 수 없었어요 😔");
}
if (footerElement !== null) {
console.log("바닥글 요소: 잘 만났어요 😊");
} else {
console.log("바닥글 요소: 만날 수 없었어요 😔");
}
if (menuElement !== null) {
console.log("메뉴 요소: 잘 만났어요 😊");
} else {
console.log("메뉴 요소: 만날 수 없었어요 😔");
}
console.log("모든 요소와의 만남을 마쳤어요!");이 연습을 통해 여러 요소를 체계적으로 관리하고 각각의 상태를 확인하는 지혜를 기를 수 있어요.
연습 3) 없는 친구를 찾으며 배우는 지혜
// 존재하지 않는 ID로 요소 찾아보기
console.log("없는 요소를 찾아보면서 배워봐요...");
let ghostElement = document.getElementById("doesNotExist");
// 현명한 대처 방법
if (ghostElement === null) {
console.log("😌 괜찮아요! 'doesNotExist' ID를 가진 요소는 없지만,");
console.log("💡 이것도 소중한 정보예요. ID를 다시 확인해볼게요.");
} else {
console.log("😲 어? 예상과 다르게 요소를 찾았네요:", ghostElement);
}이 연습을 통해 실패도 하나의 소중한 정보라는 것과, 에러를 예방하는 안전한 프로그래밍 습관을 기를 수 있어요.
🤔 좀 더 깊이 생각해보기
기본 연습을 마쳤다면, 이제 조금 더 생각해볼 만한 질문들로 이해를 깊게 해보겠어요.
생각해보기 1: 다음 코드에서 마음에 들지 않는 부분을 찾아보세요
let element = document.getElementById(userInput);
console.log(element);따뜻한 답: ID 이름에 따옴표 옷을 입혀주지 않았어요. 올바른 코드는 이래요.
let element = document.getElementById("userInput");
console.log(element);마음을 담은 해설: getElementById는 글자를 정보로 받기 때문에 ID 이름을 꼭 따옴표로 감싸줘야 해요. 따옴표가 없으면 컴퓨터는 userInput을 변수 이름으로 착각해서 혼란스러워해요.
생각해보기 2: getElementById가 null을 반환하는 따뜻한 이유들을 말해보세요
따뜻한 답: 1) 찾으려는 ID가 HTML에 실제로 없을 때, 2) ID 이름의 대소문자를 실수로 틀렸을 때, 3) ID 이름에 작은 오타가 있을 때예요.
마음을 담은 해설: getElementById는 정확히 일치하는 ID가 없으면 화를 내지 않고 조용히 null을 반환해요. 이는 "찾을 수 없어요"라는 정직한 메시지예요.
🔄 지난 여행길 되돌아보기 - 디버깅의 지혜
잠깐, 우리가 지나온 길을 되돌아보며 이전에 배운 소중한 지식들을 다시 한번 마음에 새겨볼까요? 10단원에서 배운 디버깅 방법들이 지금도 얼마나 유용한지 확인해보겠어요.
다시 만나는 친구 1: console.log로 변수 마음 들여다보기
// 학생 정보를 console.log로 따뜻하게 확인해보기
let studentName = "지은";
let studentGrade = 4;
console.log("학생 이름:", studentName);
console.log("학년:", studentGrade + "학년");
console.log("전체 정보:", "안녕하세요! " + studentName + "입니다.");따뜻한 해설:
console.log는 변수의 마음을 들여다보는 가장 기본적인 방법이에요- 변수 이름과 함께 설명을 적어주면 나중에 로그를 확인하기 훨씬 쉬워져요
- 개발자 도구의 Console 탭에서 결과를 확인할 수 있어요
다시 만나는 친구 2: try...catch로 따뜻한 보호막 만들기
// 안전한 나누기 함수 만들어보기
function kindDivide(a, b) {
try {
if (b === 0) {
throw new Error("0으로 나누는 건 수학적으로 불가능해요!");
}
let result = a / b;
console.log("계산 결과:", result);
return result;
} catch (error) {
console.log("아쉽지만 문제가 생겼어요:", error.message);
return null;
} finally {
console.log("계산을 마쳤어요!");
}
}
kindDivide(10, 2); // 정상적인 계산
kindDivide(10, 0); // 따뜻한 에러 처리따뜻한 해설:
try...catch로 에러가 생겨도 프로그램이 멈추지 않게 보호할 수 있어요throw new Error()로 우리만의 친절한 에러 메시지를 만들 수 있어요finally는 에러가 있든 없든 항상 실행되는 따뜻한 마무리예요- 이렇게 하면 에러가 생겨도 프로그램이 계속 부드럽게 실행될 수 있어요
지금까지 getElementById라는 소중한 친구와 함께 웹페이지 요소 찾기 여행을 떠나봤어요. 이 친구는 앞으로 여러분이 웹페이지와 대화를 나누는 데 없어서는 안 될 든든한 동반자가 될 거예요.
마치 동네 구멍가게의 친절한 사장님처럼, 여러분이 원하는 요소를 정확히 찾아주거나 없으면 정직하게 알려줄 거예요. 다음 시간에는 이렇게 찾은 요소들을 어떻게 아름답게 변화시킬 수 있는지 배워보겠어요!
✅ 오늘 나눈 소중한 이야기들
이번 시간에 함께 나눈 따뜻한 이야기들을 마음에 잘 간직하고 있는지 확인해보세요!
| 함께 배운 내용 | 마음에 담았나요? |
|---|---|
| getElementById의 따뜻한 개념 | ✅ |
| 사용하는 자연스러운 방법 | ✅ |
| 웹페이지와 대화하는 지혜 | ✅ |
| 피해야 할 흔한 실수들 | ✅ |
| 실제 예제를 통한 체험 | ✅ |
🎯 더 깊이 연습하고 싶은 마음을 위한 문제들
조금 더 연습하며 성장하고 싶은 분들을 위한 따뜻한 문제들이에요!
심화 문제 1. "mainTitle"이라는 ID를 가진 요소를 찾아서 변수에 소중히 보관해보세요.
let titleElement = document.getElementById("mainTitle");
console.log("제목 요소:", titleElement);심화 문제 2. "sendButton"이라는 ID를 가진 버튼을 찾아보세요.
let buttonElement = document.getElementById("sendButton");
console.log("버튼 요소:", buttonElement);심화 문제 3. 존재하지 않는 ID로 요소를 찾고 현명하게 대처해보세요.
let missingElement = document.getElementById("notThere");
console.log("없는 요소:", missingElement);
console.log("null인가요?", missingElement === null);심화 문제 4. getElementById가 null을 반환하는 경우는 언제인가요?
따뜻한 답: 찾으려는 ID가 HTML에 실제로 존재하지 않을 때예요. 예를 들어 HTML에는 "myButton"이라는 ID가 없는데 getElementById("myButton")을 사용하면 null이 반환돼요.
심화 문제 5. 다음 코드에서 아쉬운 부분을 찾고 따뜻하게 고쳐보세요.
let element = document.getElementById(userInput);
console.log(element);따뜻한 답: ID 이름에 따옴표를 씌워주지 않았어요. 고친 코드:
let element = document.getElementById("userInput");
console.log(element);📂 오늘의 마무리
오늘 함께 나눈 11.1.1 getElementById 이야기가 여러분의 마음에 따뜻하게 자리 잡았나요? 다음 시간에도 더 재미있고 유익한 내용으로 만나뵐게요!
마음에 새기기: 오늘 배운 내용을 꼭 직접 체험해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'11. 웹페이지 조종하기 (DOM 조작) > 11.1 HTML 요소 찾기' 카테고리의 다른 글
| 11.1.3 웹페이지의 만능 탐지기 - querySelector라는 지혜로운 친구 (0) | 2025.07.15 |
|---|