JavaScript document 객체와 DOM 접근 방법 완벽 가이드 getElementById부터 querySelector까지

Published in javascript

September 01, 2025

2 min read

JavaScript document 객체와 DOM 접근 방법 완벽 가이드 getElementById부터 querySelector까지

안녕하세요, 코딩하는곰입니다. 오늘은 JavaScript의 가장 기본적이면서도 핵심적인 개념인 document 객체와 DOM 접근 방법에 대해 깊이 있게 알아보겠습니다. 웹 페이지를 동적으로 조작하려면 반드시 숙지해야 하는 기술이니, 초보자분들도 쉽게 따라오실 수 있도록 상세히 설명드리겠습니다. 이 포스팅을 통해 여러분의 DOM 조작 실력을 한 단계 업그레이드해 보세요!

document 객체란 무엇인가?

document 객체는 웹 페이지의 진입점이자 DOM(Document Object Model) 트리의 최상위 객체입니다. 간단히 말해, 웹 브라우저가 HTML 문서를 로드하면 이를 JavaScript가 이해할 수 있는 객체 형태로 변환하는데, 이 변환된 결과가 바로 document 객체입니다. document 객체를 통해 우리는 페이지의 모든 요소, 스타일, 내용 등을 JavaScript로 접근하고 조작할 수 있습니다. DOM은 웹 페이지의 구조화된 표현을 제공하며, 프로그래밍 언어가 문서 구조, 스타일, 내용을 변경할 수 있도록 인터페이스를 제공합니다. document 객체는 이 DOM 트리의 루트에 해당하므로, 어떤 요소에 접근하더라도 반드시 document 객체를 통해야 합니다. DOM 트리는 노드(Node)들로 구성되어 있습니다. 가장 흔한 노드 타입은 요소 노드(Element Node), 텍스트 노드(Text Node), 속성 노드(Attr Node)입니다. document 객체를 통해 이러한 노드들을 선택하고, 생성하고, 삭제하고, 수정하는 것이 프론트엔드 개발의 핵심입니다.

// document 객체의 기본 속성 확인하기
console.log(document.title); // 현재 문서의 제목
console.log(document.URL); // 현재 문서의 완전한 URL
console.log(document.head); // <head> 요소를 참조
console.log(document.body); // <body> 요소를 참조

💡 개발 프로젝트 아이디어가 필요하다면, 자바스크립트 with 문이 금지된 진짜 이유 혼란과 성능 저하의 악순환를 참고해보세요.

단일 요소 선택 메서드: getElementById와 querySelector

DOM에서 특정 요소 하나를 선택하는 데 가장 흔히 사용되는 두 가지 메서드는 getElementById()와 querySelector()입니다.

1. getElementById()

getElementById() 메서드는 이름에서 알 수 있듯이 요소의 id 속성 값을 이용해 해당 요소를 선택합니다. HTML에서 id는 문서 내에서 유일해야 하므로, 이 메서드는 항상 단 하나의 요소만 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 장점: 매우 빠른 조회 속도 (브라우저가 id를 위한 최적화된 맵을 유지하기 때문) 주의사항: id는 대소문자를 구분하며, 숫자로 시작할 수 없습니다.

<!-- HTML -->
<div id="header">Welcome to My Blog</div>

// JavaScript
const headerElement = document.getElementById('header');
console.log(headerElement.textContent); // "Welcome to My Blog"
headerElement.style.color = 'blue'; // 선택한 요소의 스타일 변경

2. querySelector()

querySelector() 메서드는 CSS 선택자(Selector)를 인자로 받아, 해당 선택자와 일치하는 첫 번째 요소를 반환합니다. getElementById보다 훨씬 더 유연하게 요소를 선택할 수 있어 현대적인 웹 개발에서 선호되는 방법입니다. CSS 선택자 예시:

#myId: id로 선택
.myClass: class로 선택
div: 태그 이름으로 선택
div.myClass: <div>이면서 class="myClass"인 요소 선택
ul > li: 직계 자식인 <li> 요소 선택

<!-- HTML -->
<ul class="menu">
  <li>Home</li>
  <li class="active">About</li>
  <li>Contact</li>
</ul>

// JavaScript
// 클래스로 선택
const activeItem = document.querySelector('.active');
activeItem.style.fontWeight = 'bold';
// 복합 선택자로 선택 (ul.menu의 직계 자식 li 중 두 번째 것)
const secondItem = document.querySelector('ul.menu > li:nth-child(2)');
console.log(secondItem.textContent); // "About"

계산할 때 이전 기록이 필요하다면, 계산 이력 기능이 있는 웹 계산기를 활용해보세요.

복수 요소 선택 메서드: getElementsByClassName, getElementsByTagName, querySelectorAll

한 번에 여러 요소를 선택하고 컬렉션으로 가져와야 할 때는 다음 메서드들을 사용합니다.

1. getElementsByClassName()

getElementsByClassName() 메서드는 특정 클래스 이름을 가진 모든 요소를 HTMLCollection이라는 live 컬렉션으로 반환합니다. ‘live’라는 의미는 DOM이 변경되면(예: 새로운 요소가 추가되면) 컬렉션도 자동으로 업데이트된다는 것입니다.

<!-- HTML -->
<p class="highlight">Paragraph 1</p>
<div class="highlight box">Div 1</div>
<p class="highlight">Paragraph 2</p>

// JavaScript
const highlights = document.getElementsByClassName('highlight');
console.log(highlights.length); // 3
// HTMLCollection을 배열로 변환하여 순회하기 (forEach 사용을 위해)
Array.from(highlights).forEach(element => {
  element.style.backgroundColor = 'yellow';
});
// 여러 클래스를 동시에 가진 요소 찾기 (공백으로 구분)
const specificDiv = document.getElementsByClassName('highlight box');
console.log(specificDiv.length); // 1

2. getElementsByTagName()

getElementsByTagName() 메서드는 특정 태그 이름(예: 'div', 'p', 'a')을 가진 모든 요소를 HTMLCollection으로 반환합니다. 문서의 모든 요소를 선택하려면 '*'를 인자로 사용합니다.

// 모든 paragraph 요소 선택
const allParagraphs = document.getElementsByTagName('p');
// 모든 링크(a 태그) 선택
const allLinks = document.getElementsByTagName('a');
allLinks[0].href = "https://codingbear.net"; // 첫 번째 링크의 주소 변경

3. querySelectorAll()

querySelectorAll() 메서드는 querySelector()의 복수 버전입니다. CSS 선택자와 일치하는 모든 요소를 NodeList라는 컬렉션으로 반환합니다. 중요한 차이는 이 NodeList가 일반적으로 ‘static’하다는 점입니다. 즉, DOM의 변경사항을 실시간으로 반영하지 않습니다.

<!-- HTML -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card special">Card 3</div>

// JavaScript
// 모든 .card 요소 선택
const allCards = document.querySelectorAll('.card');
console.log(allCards.length); // 3
// .card이면서 .special인 요소 선택
const specialCard = document.querySelectorAll('.card.special');
console.log(specialCard.length); // 1
// NodeList는 forEach를 기본적으로 지원합니다.
allCards.forEach((card, index) => {
  card.textContent = `Updated Card ${index + 1}`;
});

HTMLCollection vs NodeList

특징	HTMLCollection (live)	NodeList (usually static)
반환 메서드	`getElementsByClassName`, `getElementsByTagName`	`querySelectorAll`
Live	예, DOM 변경시 자동 갱신	아니오, (대부분) 한 번 생성되면 변하지 않음
메서드	`item()`, `namedItem()`	`forEach()`, `item()`, `entries()` 등
배열 변환	`Array.from()` 필요	`Array.from()` 필요 (但 forEach는 직접 사용 가능)

실제 개발에서는 querySelector와 querySelectorAll의 강력한 CSS 선택자 문법과 NodeList의 forEach 메서드 지원 때문에 이 두 메서드를 가장 많이 사용하게 될 것입니다.

AI가 분석한 로또 번호 추천을 받고 싶다면, QR코드 스캔과 통계 기능을 제공하는 지니로또AI 앱이 도움이 될 것입니다.

정리하자면, document 객체를 통해 DOM에 접근하는 방법은 다양합니다. 간단하고 빠른 getElementById, 유연하고 강력한 querySelector/querySelectorAll, 그리고 live 컬렉션을 반환하는 getElementsByClassName과 getElementsByTagName까지, 각각의 특징과 사용법을 이해하는 것이 중요합니다. 프로젝트의 상황과 필요에 따라 적절한 메서드를 선택해 사용하세요. DOM 조작의 첫걸음인 ‘선택’을 마스터하셨다면, 다음 단계인 ‘조작(생성, 추가, 삭제, 수정)‘으로 나아가보는 것은 어떨까요? 항상 질문은 환영입니다. 여러분의 개발 여정을 응원합니다! 코딩하는곰이었습니다.

집중력과 논리적 사고력을 기르고 싶다면, 클래식, 데일리, 스토리 모드가 있는 스도쿠 저니를 설치해보세요.

최상의 건강을 위한 영양가득한 식품과 정보! life-plus.co.kr 바로가기

다채로운 문화축제와 공연 소식을 공유하는 블로그! culturestage.co.kr 바로가기

비트코인 세계로의 첫걸음! 지금 가입하고 거래 수수료 할인 혜택 받으세요! bitget.com 바로가기

JavaScript document 객체와 DOM 접근 방법 완벽 가이드 getElementById부터 querySelector까지

document 객체란 무엇인가?

단일 요소 선택 메서드: getElementById와 querySelector

1. getElementById()

2. querySelector()

복수 요소 선택 메서드: getElementsByClassName, getElementsByTagName, querySelectorAll

1. getElementsByClassName()

2. getElementsByTagName()

3. querySelectorAll()

HTMLCollection vs NodeList

Tags

Share

Table Of Contents

Related Posts

JavaScript document 객체와 DOM 접근 방법 완벽 가이드 getElementById부터 querySelector까지

.css-1qh5hbx{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.5rem;position:relative;}document 객체란 무엇인가?

단일 요소 선택 메서드: getElementById와 querySelector

.css-c6w1gk{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.25rem;position:relative;}1. getElementById()

2. querySelector()

복수 요소 선택 메서드: getElementsByClassName, getElementsByTagName, querySelectorAll

1. getElementsByClassName()

2. getElementsByTagName()

3. querySelectorAll()

HTMLCollection vs NodeList

Tags

Share

Table Of Contents

Related Posts

document 객체란 무엇인가?

1. getElementById()