Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript getElementById() 사용법: ID로 웹 요소 손쉽게 선택하기

웹 페이지에서 특정 요소를 선택하고 싶으신가요? 그렇다면 자바스크립트 요소 게터(getter)의 왕이라 불리는 getElementById 메서드가 정답입니다.

getElementById는 요소의 ID를 기준으로 해당 요소를 선택해 줍니다. 이름 그대로 "ID로 요소를 가져온다(Get Element By Id)"는 의미를 담고 있어 매우 직관적인 메서드입니다.

이 글에서는 getElementById가 무엇인지, 어떻게 동작하는지, 그리고 코드에서 언제 활용하면 좋은지 살펴보겠습니다. 또한 "더 보기" 텍스트 버튼 예제를 통해 실제 동작 방식까지 함께 확인해 보겠습니다.

그럼 시작해 볼까요?

getElementById란?

getElementById()는 Document 객체의 메서드로, 개발자가 지정한 ID 속성 값을 기준으로 HTML DOM에서 요소 하나를 선택합니다.

다음 코드를 살펴보세요:

index.html

<button id="mainButton">이것은 버튼입니다!</button>

scripts.js

const button = document.getElementById("mainButton");

HTML 코드에서는 ID가 mainButton인 <button> 요소를 정의했습니다. 그리고 자바스크립트 코드는 getElementById() 메서드를 사용해 이 요소를 가져옵니다.

이 메서드는 페이지에서 단 하나의 요소를 가져올 때 특히 유용합니다. HTML과 CSS를 배울 때 이미 알고 있겠지만, ID는 문서 내에서 반드시 고유해야 합니다. 바로 이 점 덕분에 getElementById()는 단일 요소를 가져오는 데 가장 적합한 메서드입니다.

따라서 요소에 ID를 지정했다면 이 메서드를 사용하는 것이 좋습니다. 조건에 맞는 첫 번째 요소 객체를 반환하는 querySelector나 getElementsByClassName 같은 범용적인 게터 대신, getElementById()를 사용하면 원하는 요소를 정확하게 가져올 수 있습니다.

getElementById()는 웹 페이지에서 요소를 가져올 때 가장 널리 쓰이는 메서드 중 하나입니다.

getElementById 사용 시 알아두어야 할 사항

예제로 들어가기 전에, 초보자들이 이 메서드를 사용할 때 자주 저지르는 실수부터 짚고 넘어가겠습니다.

새로운 것을 배울 때 코드가 의도대로 작동하지 않으면 정말 답답하죠. getElementById()에 익숙해지는 과정에서 흔히 발생하는 오류들을 미리 알아두면 디버깅 시간을 크게 아낄 수 있습니다.

첫째, getElementById()는 대소문자를 구분합니다. 프로그래밍에서는 ID를 대문자로 표기하는 경우가 많지만, 이 메서드에서는 반드시 카멜 케이스(camelCase)인 Id를 사용해야 합니다. 그렇지 않으면 메서드가 작동하지 않습니다.

둘째, 지정하는 ID에는 해시(#) 기호를 포함하면 안 됩니다. 다음 코드를 보세요:

const button = document.getElementById("#mainButton");

언뜻 보면 ID가 mainButton인 요소를 가져올 것 같지만, 실제로는 그렇지 않습니다. 가져오려는 요소의 ID 값만 정확히 지정해야 합니다:

const button = document.getElementById("mainButton");

흔한 실수를 모두 확인했으니, 이제 실제 예제를 만들어 보겠습니다.

getElementById 사용 방법

웹 서핑을 하다 보면 "더 보기(Read more)"라는 문구를 자주 접하게 됩니다. 웹 페이지가 본문 일부만 보여준 뒤, 나머지 내용을 확인하려면 해당 버튼을 누르라고 안내하는 방식이죠.

바로 그 기능을 getElementById() 게터로 구현해 보겠습니다. 이 튜토리얼의 최종 코드는 GitHub에서 확인할 수 있습니다.

프런트엔드 만들기

먼저 HTML과 CSS로 간단한 프런트엔드를 만들어 보겠습니다. 새 파일 index.html을 생성하고 다음 코드를 붙여 넣으세요:

<!DOCTYPE html>
<html>
    <head>
        <title>An Introduction to getElementById()</title>

        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>
            <h1>JavaScript getElementById()</h1>
            <p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
            <span id="showMore">Read more</span>
            <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
        </div>
    </body>
    <script src="scripts.js"></script>
</html>

이 문서에는 getElementById() 메서드에 대한 정보를 담은 박스가 정의되어 있습니다. 박스 안에는 제목, 두 개의 텍스트 단락, 그리고 마지막 단락을 펼치는 데 사용할 span 태그가 들어 있습니다.

이제 styles.css 파일을 만들고 다음 코드를 붙여 넣어 페이지에 스타일을 적용하세요:

styles.css

body {
	font-family: Arial, sans-serif;
	background-color: #f7f7f7;
	margin: 0;
	padding: 40px;
}

div {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
	color: #333333;
}

#showMore {
	color: #0066cc;
	cursor: pointer;
	text-decoration: underline;
}

이 코드는 페이지에 색상과 여백을 더해 시각적으로 매력적으로 만들어 줍니다. 웹 페이지를 열면 다음과 같이 보입니다:

JavaScript getElementById() 사용법: ID로 웹 요소 손쉽게 선택하기

하지만 한 가지 문제가 있습니다. "더 보기" 문구를 눌러도 아무 일도 일어나지 않고, 마지막 단락도 계속 화면에 보입니다. 아직 자바스크립트 코드를 추가하지 않았기 때문입니다. 이제 웹 페이지에 자바스크립트 기능을 추가해 보겠습니다.

자바스크립트 코드 추가하기

먼저 작업할 요소들을 선택하겠습니다. 선택해야 할 요소는 "더 보기" 텍스트가 담긴 <span> 태그와, 보였다 숨겼다 전환할 단락입니다.

scripts.js 파일을 만들고 다음 코드를 붙여 넣으세요:

var paragraph = document.getElementById("hiddenText");

paragraph.style.display = "none";

이 코드에서는 getElementById()를 사용해 DOM 문서에서 단락을 가져왔습니다. 즉, hiddenText라는 ID를 가진 객체를 선택한 뒤 화면에서 숨긴 것입니다. 다음으로, 텍스트를 토글하는 함수를 만들어 보겠습니다:

function toggleText() {
	if (paragraph.style.display === "none") {
		paragraph.style.display = "block";
	} else {
		paragraph.style.display = "none";
	}
}

먼저 ID가 hiddenText인 요소를 선택했습니다. 이는 "더 보기"를 클릭했을 때 나타났다 사라졌다 할 텍스트 단락을 가리킵니다.

그다음 if 문을 작성해 해당 단락이 현재 보이는지 확인합니다. 보이지 않는 상태라면 단락의 display 값을 block으로 설정해 화면에 나타나게 하고, 그렇지 않다면 display 값을 none으로 설정해 화면에서 사라지게 합니다.

아직 코드가 완성되지 않았습니다. 다음으로, "더 보기" 텍스트를 클릭하면 실행될 이벤트 리스너를 만들어 보겠습니다:

var showButton = document.getElementById("showMore");

showButton.addEventListener("click", toggleText);

이 코드는 페이지에서 "더 보기" 텍스트를 선택한 뒤, 해당 텍스트가 클릭될 때 toggleText() 함수를 호출하는 이벤트 리스너를 등록합니다.

이제 웹 페이지를 열고 "더 보기" 텍스트를 클릭해 볼까요?

JavaScript getElementById() 사용법: ID로 웹 요소 손쉽게 선택하기

코드가 정상적으로 작동합니다! "더 보기" 텍스트를 클릭하면 숨겨진 내용이 나타나고, 다시 한번 클릭하면 사라집니다.

마무리

getElementById() 게터를 사용하면 ID를 기준으로 웹 페이지에서 원하는 요소를 간편하게 가져올 수 있습니다.

좀 더 도전해 보고 싶으신가요? 텍스트가 화면에 표시되어 있을 때 "더 보기" 문구를 "접기(Read less)"로 바꿔 보세요. 더 나아가 페이지에 이미지를 몇 장 추가하고, 버튼을 클릭하면 모든 이미지를 숨기는 기능을 만들어 볼 수도 있습니다.

이제 여러분도 프로 개발자처럼 getElementById() 게터를 활용할 준비가 되었습니다!