JavaScript DOM 선택자 정리와 위치 고민

안녕하세요! AT SOPT YB 36기 엄지우입니다.

 

프로젝트나 개인 작업에서 JavaScript로 DOM을 다루다 보면 가장 먼저 부딪히는 부분이 바로 요소 선택자(selector)를 어디서 선언할지에 대한 고민입니다. 이 글에서는 자주 사용하는 선택자 종류와, 선택자를 코드 상단에 선언할지 아니면 관련 로직 근처에 둘지에 대해 정리해보았습니다.

 

 

 

목차

1. JavaScript 선택자 종류 정리
2. DOM Selector 위치 관리
3. 어떤 방식이 더 좋은가?

 

 

1. JavaScript 선택자 종류 정리

자바스크립트에서 DOM 요소를 선택하는 기본 방법은 다음과 같습니다:

선택자 종류	설명
getElementById('id')	ID로 요소를 선택 (하나만 반환)
getElementsByClassName('class')	클래스명으로 여러 요소 선택 (HTMLCollection 반환)
getElementsByTagName('tag')	태그명으로 여러 요소 선택
querySelector('selector')	CSS 선택자 방식, 첫 번째 요소 반환
querySelectorAll('selector')	CSS 선택자 방식, 모든 요소 반환 (NodeList 반환)

 

💡 참고 자료: JavaScript/jQuery 선택자 모음 정리 - Tistory

 

2. DOM Selector 위치 관리

1️⃣ 상단 선언 방식

// 모든 DOM 요소 여기서 한 번에
const todoBody = document.querySelector(".todo-body");
const addBtn = document.querySelector(".add-btn");
const input = document.querySelector(".input");
const prioritySelect = document.querySelector(".priority-select");
const selectAllCheckbox = document.getElementById('select-all')

 

✔ 장점

• 한눈에 다 보임 → 유지보수, 디버깅에 유리함
• DOM 조작 대상이 어디에 있는지 예측 가능
• 협업 시 다른 사람이 코드 읽기 쉬움
• 중복 선언 방지 및 퍼포먼스 개선

❌ 단점

• 선언은 위에 있는데 쓰는 코드는 아래 → 약간 떨어져 있는 느낌이 들 수 있음

 

2️⃣ 관련 로직 근처 선언 방식

// 추가 기능에서만 input, prioritySelect 선택
addBtn.addEventListener("click", () => {
  const input = document.querySelector(".input");
  const prioritySelect = document.querySelector(".priority-select");
  ...
});

 

✔ 장점

• 로직 근처에서 선언 → "여기서만 쓰는구나"가 명확함
• 코드가 읽는 흐름대로 순차적이라 자연스러움

❌ 단점

• 같은 요소를 여러 곳에서 쓸 경우 중복 선택 발생 → 퍼포먼스 손해, 관리 불편
• 선언 위치가 흩어져서 나중에 찾기 힘들 수 있음

 

3. 어떤 방식이 더 좋은가?

프로젝트의 규모에 따라 선택자 위치 전략을 다르게 가져가는 것이 좋습니다.

• ✅ 소규모/스크립트 하나짜리 앱: 상단 정리 방식 추천
• ✅ 규모가 크거나 모듈화된 구조: 함수 내부, 컴포넌트 내부 선언

TIP: document.querySelector()는 DOM 트리를 순회하므로 너무 자주 호출하면 퍼포먼스에 영향 줄 수 있어요. 중복 선택은 피하는 게 좋습니다.

 

🔍 결론: 모듈/컴포넌트가 작을 땐 "상단 정리형"이 정석

 

예를 들어 이번 세미나 실습에서 만든 간단한 todo 리스트 앱처럼, 하나의 script에서 DOM을 직접 다루는 소규모 프로젝트라면 아래와 같이 모든 요소를 위에서 한 번에 정리하는 방식이 가장 깔끔하고 유지보수에도 유리합니다:

// 맨 위에서 정리 ✅
const todoBody = document.querySelector(".todo-body");
const addBtn = document.querySelector(".add-btn");
const input = document.querySelector(".input");
const prioritySelect = document.querySelector(".priority-select");
const selectAllCheckbox = document.getElementById('select-all');

그리고 각 함수에서는 그냥 input.value, prioritySelect.value처럼 활용만 하면 되기 때문에 로직도 훨씬 단순하고 깔끔하게 유지됩니다.

 

---

🤙🏻 마무리하며

동아리 프로젝트에서 초기에는 이벤트 핸들러 안에서 DOM 요소를 계속 다시 선택하다가, 중복 코드가 늘어나고 관리가 어려워진 경험이 있었어요. 이후에는 상단 정리 방식으로 통일하고, 코드가 훨씬 깔끔해졌습니다.

작은 차이지만, 선택자 위치만 정리해도 유지보수성과 협업 효율이 확 달라진다는 걸 꼭 기억해두면 좋겠습니다!

 

이 글이 DOM 선택자 정리에 고민이 많았던 분들에게 도움이 되었길 바랍니다 ✍🏻