jQuery 선택자와 DOM 조작 완전 가이드 - 기초부터 심화까지

jQuery를 처음 배우거나, 오래전에 배웠지만 기초가 흔들리는 개발자들이 많다. 특히 선택자(Selector)와 DOM 조작은 jQuery의 가장 기본이 되는 부분인데, 이것만 제대로 알아도 jQuery를 훨씬 효율적으로 사용할 수 있다. 또한 최근에는 Vanilla JavaScript가 많이 사용되고 있지만, 여전히 레거시 프로젝트나 빠른 개발이 필요한 상황에서는 jQuery가 매우 유용하다.

이번 글에서는 jQuery의 기본이 되는 선택자부터 시작해서, 실제 프로젝트에서 자주 사용되는 DOM 조작 방법들을 정리해서 소개하겠다. 이 글을 읽은 후에는 jQuery로 대부분의 DOM 작업을 문제없이 할 수 있을 것이다.

jQuery 선택자 완벽 정리

1. 기본 선택자

// ID 선택자
$('#myId')              // id="myId" 인 요소 선택

// Class 선택자
$('.myClass')           // class="myClass" 인 모든 요소 선택

// 태그 선택자
$('div')                // 모든 <div> 태그 선택

// 전체 선택자
$('*')                  // 문서의 모든 요소 선택

2. 속성 선택자

// 속성 존재 여부
$('input[type]')                    // type 속성이 있는 모든 input

// 속성값 정확히 일치
$('input[type="text"]')             // type="text" 인 input 선택

// 속성값 포함 (Substring)
$('a[href*="example"]')             // href에 "example"이 포함된 모든 a태그

// 속성값 시작
$('a[href^="https"]')               // href가 https로 시작하는 a태그

// 속성값 종료
$('img[src$=".jpg"]')               // src가 .jpg로 끝나는 img 태그

3. 위치 선택자 (Pseudo-selector)

// 첫 번째 요소
$('li:first')                       // 모든 li 중 첫 번째
$('li').first()                     // 더 명확한 표현 (권장)

// 마지막 요소
$('li:last')
$('li').last()

// n번째 요소 (0부터 시작)
$('li:eq(2)')                       // 3번째 li (인덱스 2)
$('li').eq(2)

// 짝수/홀수
$('tr:even')                        // 짝수 인덱스 (0, 2, 4...)
$('tr:odd')                         // 홀수 인덱스 (1, 3, 5...)

// n의 배수
$('li:nth-child(3n+1)')             // 3의 배수+1 번째 li

4. 상태 선택자

// 체크된 체크박스/라디오
$('input:checked')                  

// 활성화된 요소
$('input:enabled')                  

// 비활성화된 요소
$('input:disabled')                 

// 보이는 요소
$(':visible')                       

// 숨겨진 요소
$(':hidden')                        

// 빈 요소
$('td:empty')                       // 내용이 없는 td 선택

선택자 조합하기

// 여러 선택자를 쉼표로 연결 (OR 조건)
$('.class1, .class2, #id1')         // class1 또는 class2 또는 id1 인 요소들

// 자손 선택자 (모든 후손)
$('div p')                          // div 안의 모든 p 선택

// 자식 선택자 (직속 자식만)
$('div > p')                        // div의 직속 자식 p만 선택

// 인접 형제 선택자
$('h2 + p')                         // h2 바로 다음의 p

// 일반 형제 선택자
$('h2 ~ p')                         // h2 이후의 모든 p

// 복합 선택자 (가장 성능이 좋음)
$('div.active p.highlight')         // div.active 내의 p.highlight

DOM 조작 기본

1. 텍스트와 HTML 조작

// 텍스트 가져오기 / 설정하기
$('#myDiv').text()                  // 텍스트 내용 가져오기
$('#myDiv').text('새로운 텍스트')      // 텍스트 설정

// HTML 가져오기 / 설정하기
$('#myDiv').html()                  // HTML 내용 가져오기
$('#myDiv').html('<p>새로운</p>')  // HTML 설정 (주의: XSS 위험)

// 값 가져오기 / 설정하기 (input, textarea, select)
$('#myInput').val()                 // 입력값 가져오기
$('#myInput').val('새로운 값')       // 입력값 설정

2. 요소 추가 / 제거

// append: 자식 요소의 끝에 추가
$('#container').append('<p>새로운 단락</p>')

// prepend: 자식 요소의 처음에 추가
$('#container').prepend('<p>맨 앞</p>')

// before: 형제 요소 앞에 추가
$('#myDiv').before('<p>이전</p>')

// after: 형제 요소 뒤에 추가
$('#myDiv').after('<p>이후</p>')

// remove: 요소 제거
$('#myDiv').remove()                // 요소와 그 자식들 제거

// empty: 자식 요소만 제거
$('#myDiv').empty()                 // 요소 자체는 유지, 내용만 비움

// replaceWith: 요소 교체
$('#myDiv').replaceWith('<section></section>')

3. 속성 조작

// 속성 가져오기 / 설정하기
$('img').attr('src')                // src 속성 값 가져오기
$('img').attr('src', 'new.jpg')     // src 속성 설정
$('img').attr({                     // 여러 속성 한번에 설정
   'src': 'new.jpg',
   'alt': '이미지 설명',
   'width': 200
})

// 속성 제거
$('input').removeAttr('disabled')

// 데이터 속성 (data-*)
$('#myDiv').data('userId', 123)     // data-userId 저장
$('#myDiv').data('userId')          // data-userId 읽기

4. CSS 클래스 조작

// 클래스 추가
$('#myDiv').addClass('active')

// 클래스 제거
$('#myDiv').removeClass('active')

// 클래스 토글 (있으면 제거, 없으면 추가)
$('#myDiv').toggleClass('active')

// 클래스 확인
$('#myDiv').hasClass('active')      // true/false 반환

// 여러 클래스 한번에
$('#myDiv').addClass('active highlight error')

5. CSS 스타일 조작

// 스타일 가져오기
$('#myDiv').css('color')            // 컬러값 반환

// 스타일 설정
$('#myDiv').css('color', 'red')

// 여러 스타일 한번에
$('#myDiv').css({
   'color': 'red',
   'background': 'yellow',
   'font-size': '16px',
   'border': '1px solid black'
})

// 너비/높이
$('#myDiv').width()                 // 너비 가져오기 (padding 제외)
$('#myDiv').width(200)              // 너비 설정

$('#myDiv').height()                // 높이 가져오기
$('#myDiv').outerWidth()            // padding + border 포함
$('#myDiv').innerHeight()           // padding 포함

순회 (Traversal) 하기

선택한 요소를 기준으로 다른 요소를 찾는 방법들:

// 부모 요소
$('#myDiv').parent()                // 직속 부모
$('#myDiv').parents()               // 모든 상위 요소들
$('#myDiv').closest('div')          // div 부모를 찾을 때까지 올라감

// 자식 요소
$('#myDiv').children()              // 직속 자식들
$('#myDiv').find('p')               // 후손 중 p 요소 모두

// 형제 요소
$('#myDiv').siblings()              // 모든 형제
$('#myDiv').next()                  // 다음 형제 하나
$('#myDiv').nextAll()               // 다음의 모든 형제
$('#myDiv').prev()                  // 이전 형제 하나

// 필터링
$('li').filter('.active')           // active 클래스인 li만
$('li').not('.active')              // active 클래스가 아닌 li만

실무 예제

1. 테이블 행 추가하기

<?php
// HTML
<table id="userTable">
   <tr><th>이름</th><th>이메일</th></tr>
</table>

// jQuery
$(document).ready(function(){
   var html = '<tr><td>홍길동</td><td>hong@example.com</td></tr>';
   $('#userTable').append(html);
})
?>

2. 폼 유효성 검사

$(document).ready(function(){
   $('#submitBtn').click(function(){
      var email = $('#email').val();
      var password = $('#password').val();
      
      if(email === '' || password === '') {
         alert('이메일과 비밀번호를 입력해주세요');
         return false;
      }
      
      if(email.indexOf('@') === -1) {
         alert('올바른 이메일 형식이 아닙니다');
         return false;
      }
      
      // 검증 완료, 폼 전송
      $('form').submit();
   });
});

3. 버튼 클릭 시 요소 표시/숨김

$(document).ready(function(){
   $('#toggleBtn').click(function(){
      $('#content').slideToggle(300);  // 300ms 시간으로 토글
      // 다른 옵션: fadeToggle(), toggle()
   });
});

주의사항

XSS 주의 : .html()로 사용자 입력을 설정할 때는 반드시 검증/이스케이프 처리
선택자 성능 : 복잡한 선택자는 느리니 최대한 단순하게
이벤트 위임 : 동적으로 생성되는 요소에는 .on() 사용 (다음 편에서 다룸)
메모리 누수 : 제거된 요소의 이벤트 핸들러도 정리하기

jQuery의 선택자와 DOM 조작은 처음엔 복잡해 보이지만, 자주 사용하다 보면 손에 익게 된다. 이번 글의 예제들을 직접 따라 해보면서 실습하면 jQuery의 기초가 충분히 다져질 것이다. 다음 편에서는 jQuery의 이벤트 처리와 AJAX 통신을 다룰 예정이니 계속해서 따라와주길 바란다.