💙 document.querySelector
HTML 문서 안에서 원하는 요소(Element)를 하나 찾는 JavaScript 명령어
"선택자"는 CSS 선택자 문법을 사용한다.
만약 여러 개가 있으면 첫 번재 것만 가져온다.
<body>
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스</div>
</body>
const box = document.querySelector('.box');
console.log(box.textContent);여러 개를 찾고 싶다면 document.SelectAll() 을 사용한다.
선택자 정리
| 선택자 예시 | 의미 |
|---|---|
| '#id명' | 특정 ID를 가진 요소 선택 |
| '.클래스명' | 특정 클래스를 가진 요소 선택 |
| '태그명' | 특정 태그 (예: div, p 등) 선택 |
| 'div.box' | div 태그면서 box 클래스를 가진 요소 선택 |
| 'div > p' | div 바로 아래에 있는 p 태그 선택 |
💙 .classList
HTML 요소(Element)의 class 속성에 접근하고 조작할 수 있게 해주는 특수한 객체
클래스를 추가(add), 제거(remove), 토글(toggle, 있으면 제거하고 없으면 추가), 특정 클래스 있는지 확인(contains) 를 할 수 있다.
즉, 문자열을 직접 다루는 대신 간편하게 여러 클래스를 관리할 수 있게 해주는 도구이다.
<div id="myDiv" class="box"></div>
const div = document.getElementById('myDiv');
// 클래스 추가
div.classList.add('highlight');
// 클래스 제거
div.classList.remove('box');
// 클래스 토글 (있으면 빼고, 없으면 추가)
div.classList.toggle('active');
// 클래스 존재 여부 확인
if (div.classList.contains('highlight')) {
console.log('하이라이트 되어 있습니다.');
}classList는 배열(Array) 은 아니지만, 배열처럼 인덱스로 접근할 수는 있다.
-> div.classList[0]
하나만 선택할 때는 remove하고 add를 따로 쓰는 게 안정적이다.
토글은 "선택 / 해제"를 유저에게 맡기는 경우(멀티선택 가능할 때) 쓰는 것을 권장한다.
이미 선택된 요소에서 toggle하면 "선택 해제"
새로 선택한 요소도 그냥 toggle이라서 둘 다 없어질 수 있다
-> 즉, "항상 하나만 선택" 규칙을 보장하지 못 한다.
toggle - force
클래스를 무조건 추가하거나 제거할 수 있다.
// force 기본 문법
element.classList.toggle('클래스명', 조건);
// 무조건 추가
// 클래스가 없으면 추가, 있어도 유지
div.classList.toggle('highlight', true);
// 무조건 제거
// 클래스가 있어도 제거됨
div.classList.toggle('highlight', false);
// 예제
const box = document.getElementById('box');
const isSelected = true; // 혹은 어떤 상태값
box.classList.toggle('selected', isSelected); // isSelected에 따라 상태 결정toggle이지만 조건을 강제해서 add()나 remove()처럼 동작시킬 수 있다.
사용시점
if없이 조건만으로 깔끔하게 표현하고 싶을 때true일 때 클래스 추가,false일 때 제거하는 경우- 코드의 가독성을 높이고 싶을 때
🤍 회고
오늘은 알고리즘 대신 프로젝트 개발을 진행하면서 생긴 궁금증을 정리하고 공부한 내용을 작성했다. 특히 `.classList`를 공부하던 중 `toggle` 메서드가 있는데도 불구하고 `add`와 `remove`를 따로 사용하는 경우가 있다는 점이 신경 쓰였다. 이에 대해 여러 블로그와 GPT를 통해 조사한 결과, `toggle`은 항상 하나만 선택되는 상태를 보장하지 못하는 문제가 있을 수 있다는 것을 알게 되었다. 또한 `toggle`의 두 번째 인자로 `force` 값을 설정해 명확하게 추가 또는 제거를 제어할 수 있다는 것도 함께 공부했다. 이번 경험을 통해 단순히 메서드를 사용하는 데서 그치지 않고, "언제 어떤 상황에서 어떤 메서드를 써야 하는지" 고민하고 정확히 이해하는 태도의 중요성을 다시 느꼈다.
친애하는 개발자