React/개념

DOM 요소 선택 메서드 총정리

hihijh826 2025. 2. 12. 14:30
728x90
반응형
SMALL

1. getElementById

HTML 문서에서 특정 ID를 가진 요소를 찾아 반환하는 JavaScript 메서드

document.getElementById('elementId')
  • ID로만 요소 선택
  • 가장 빠른 성능
  • 단일 요소 반환 (또는 null)
  • ID는 문서에서 고유해야 함

예시1 )

// 기본 선택
const element = document.getElementById('myId');

// 스타일 변경
document.getElementById('myId').style.backgroundColor = 'red';

// 클래스 조작
const element = document.getElementById('myId');
element.classList.add('active');    // 클래스 추가
element.classList.remove('hidden'); // 클래스 제거
element.classList.toggle('show');   // 클래스 토글

// 내용 변경
document.getElementById('myId').textContent = '새로운 텍스트';
document.getElementById('myId').innerHTML = '<span>HTML 내용</span>';

// 속성 조작
const input = document.getElementById('myInput');
input.setAttribute('disabled', 'true');
input.removeAttribute('disabled');

예시2 )

document.getElementById('naverLoginButton').onclick = handleNaverLogin; 사용자가 naverLoginButton을 클릭할 때 handleNaverLogin 함수를 호출하여 로그인 관련 작업을 수행

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Naver Login Example</title>
</head>
<body>
    <button id="naverLoginButton">네이버 로그인</button>

    <script>
        function handleNaverLogin() {
            // 네이버 로그인 처리 로직
            console.log("네이버 로그인 버튼이 클릭되었습니다.");
            // 추가적인 로그인 로직을 여기에 작성
        }

        document.getElementById('naverLoginButton').onclick = handleNaverLogin;
    </script>
</body>
</html>
  • document.getElementById('naverLoginButton'):
    • 이 부분은 HTML 문서에서 id가 naverLoginButton인 요소를 찾음
  • onclick: 클릭 이벤트 핸들러 지정
  • handleNaverLogin: 실제 로그인 처리 로직을 포함하는 함수

[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)

2. querySelector

querySelector는 DOM에서 CSS 선택자와 일치하는 첫 번째 요소를 찾는 JavaScript 메서드

document.querySelector('selector')
  • 모든 CSS 선택자 사용 가능
  • 첫 번째 일치 요소만 반환
  • 더 느린 성능 (전체 DOM 탐색)
  • 일치하는 요소가 없으면 null 반환
  • 다양한 선택자 예시:
  1. 선택자 유형:
  2. // 태그로 선택 document.querySelector('div') // 클래스로 선택 document.querySelector('.className') // ID로 선택 document.querySelector('#idName') // 속성으로 선택 document.querySelector('[data-test]') // 복합 선택자 document.querySelector('div.className > p')
  3. 범위:
  4. // document 전체에서 검색 document.querySelector() // 특정 요소 내에서만 검색 someElement.querySelector()

예시 1)

// 다양한 선택자 예시
const byId = document.querySelector('#myId');              // ID로 선택
const byClass = document.querySelector('.myClass');        // 클래스로 선택
const byTag = document.querySelector('div');              // 태그로 선택
const byAttribute = document.querySelector('[data-test]'); // 속성으로 선택

// 복합 선택자
const nestedElement = document.querySelector('div.container > p.text');
const specificInput = document.querySelector('form input[type="text"]');

// 가상 클래스 사용
const firstChild = document.querySelector('li:first-child');
const hoverElement = document.querySelector('button:hover');

// 동적 스타일 변경
const element = document.querySelector('.myClass');
element.style.cssText = 'color: blue; font-size: 16px;';

예시2)

// 첫 번째 버튼 찾기
const button = document.querySelector('button');

// 클래스가 있는 첫 번째 버튼 찾기
const specialButton = document.querySelector('button.special');

// 특정 div 안의 첫 번째 버튼 찾기
const containerDiv = document.querySelector('.container');
const buttonInDiv = containerDiv.querySelector('button');

querySelectorAll()과의 차이:

  • querySelector: 첫 번째 일치 요소만 반환
  • querySelectorAll: 일치하는 모든 요소를 NodeList로 반환

3. querySelectorAll

document.querySelectorAll('selector')
  • 일치하는 모든 요소를 NodeList로 반환
  • querySelector와 동일한 선택자 사용
  • 반환된 NodeList는 배열과 유사하지만 배열은 아님

예시)

// 여러 요소 선택
const allParagraphs = document.querySelectorAll('p');
const multipleClasses = document.querySelectorAll('.class1, .class2');

// NodeList 순회
document.querySelectorAll('.items').forEach(item => {
    item.style.color = 'blue';
});

// 배열로 변환하여 사용
const elements = Array.from(document.querySelectorAll('.myClass'));
elements.map(el => el.textContent = '새로운 텍스트');

// 특정 조건의 요소만 선택
const activeItems = document.querySelectorAll('.item.active');

4. 이벤트 핸들링

1) onclick 방식

// getElementById 사용
document.getElementById('button').onclick = function() {
    // 처리 로직
};

// querySelector 사용
document.querySelector('#button').onclick = function() {
    // 처리 로직
};

예시)

// 기본 클릭 이벤트
document.getElementById('myButton').onclick = function() {
    alert('버튼 클릭됨!');
};

// 여러 이벤트 처리
const button = document.querySelector('#myButton');
button.onclick = function() {
    this.style.backgroundColor = 'red';
};
button.onmouseover = function() {
    this.style.backgroundColor = 'blue';
};

2) addEventListener 방식 (권장)

// getElementById 사용
document.getElementById('button').addEventListener('click', function() {
    // 처리 로직
});

// querySelector 사용
document.querySelector('#button').addEventListener('click', function() {
    // 처리 로직
});

예시)

// 기본 이벤트 리스너
document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('클릭된 요소:', event.target);
    console.log('이벤트 타입:', event.type);
});

// 여러 이벤트 리스너
const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
    console.log('클릭 이벤트 발생');
});

button.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'yellow';
});

button.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
});

// 이벤트 위임
document.querySelector('.container').addEventListener('click', function(e) {
    if (e.target.matches('.item')) {
        console.log('아이템 클릭:', e.target);
    }
});

5. 사용 예시

// 1. 단순 ID 선택
const element = document.getElementById('myId');

// 2. 클래스를 가진 첫 번째 요소
const firstElement = document.querySelector('.myClass');

// 3. 모든 클래스 요소
const allElements = document.querySelectorAll('.myClass');

// 4. 특정 요소 내에서 검색
const container = document.getElementById('container');
const elementInContainer = container.querySelector('.item');

// 5. 이벤트 리스너 추가
document.getElementById('button').addEventListener('click', () => {
    console.log('Clicked!');
});

6. 선택 가이드

  • ID로 단일 요소 선택: getElementById (최고 성능)
  • 복잡한 선택자 필요: querySelector
  • 여러 요소 선택: querySelectorAll
  • 동적 이벤트 처리: addEventListener

7. 실전 활용 예시

// 폼 제출 처리
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const input = this.querySelector('input[type="text"]');
    console.log('입력값:', input.value);
});

// 동적 요소 생성 및 추가
const container = document.querySelector('.container');
const newElement = document.createElement('div');
newElement.className = 'new-item';
newElement.textContent = '새로운 항목';
container.appendChild(newElement);

// 요소 삭제
const elementToRemove = document.querySelector('.remove-me');
elementToRemove?.parentNode.removeChild(elementToRemove);

// 조건부 클래스 토글
document.querySelector('.toggle-button').addEventListener('click', function() {
    const target = document.querySelector('.target');
    target.classList.toggle('active', this.checked);
});

6. 고급 활용 예시

// 요소 위치 및 크기 확인
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
console.log('위치:', rect.top, rect.left);
console.log('크기:', rect.width, rect.height);

// 스크롤 이벤트 처리
window.addEventListener('scroll', function() {
    const scrolled = window.scrollY;
    document.querySelector('.parallax').style.transform =
        `translateY(${scrolled * 0.5}px)`;
});

// 요소 애니메이션
document.querySelector('.animate').addEventListener('click', function() {
    this.style.transition = 'all 0.3s ease';
    this.style.transform = 'scale(1.2)';
});
728x90
반응형
LIST