반응형
CSS 선택자 종류
document.querySelector(선택자)
document.querySelectorAll(선택자)
CSS 선택자를 사용하는 querySelector를 알아보기 위해 먼저 CSS 선택자의 종류부터 알아보겠습니다.
다음 표와 같은 키워드를 사용해 특정 요소들을 가져올 수 있습니다.
| 이름 | 선택자 형태 | 설명 |
| 태그 선택자 | 태그 |
특정 태그를 가진 요소를 추출
|
| 아이디 선택자 | #아이디 |
특정 id 속성을 가진 요소를 추출
|
| 클래스 선택자 | .클래스 |
특정 class 속성을 가진 요소를 추출
|
| 속성 선택자 | [속성 = 값] |
특정 속성 값을 갖고 있는 요소를 추출
|
| 후손 선택자 | 선택자1 선택자2 |
선택자1 아래에 있는 선택자2를 선택
|
querySelector
querySelector는 위와 같은 css 선택자를 이용해 html 문서 내 첫번째 타겟 요소를 반환합니다.
동일한 선택자 형태를 갖고 있는 객체가 있더라도 html 문서 내 첫번째를 나타내는 요소 하나만 반환합니다.
그럼 여러개의 h1 태그에 querySelector를 이용해 글자 색상을 빨간색으로 바꿔보겠습니다.
<body>
<h1>h1 - 1</h1>
<h1>h1 - 2</h1>
<h1>h1 - 3</h1>
<script>
const h1 = document.querySelector('h1')
h1.style.color = 'Red'
</script>
</body>
역시나 선택자에 h1 태그를 넣어주었는데도 첫번째 h1 요소만 색상이 바뀐 것을 알 수 있습니다.
querySelectorAll
querySelectorAll는 사용법이 querySelector과 사용법이 동일하지만 모든 타겟 요소를 배열의 형태로 반환합니다.
선택자 사이에 ( , )를 사용한다면 여러 요소를 함께 가져올 수 있습니다.
반환을 배열 형태로 해주기 때문에 타겟 요소을 조작한다면 for, forEach 같은 반복문을 사용해주어야 합니다.
그럼 다음 코드로 요소를 선택해 글씨 색상을 모두 빨간색으로 바꿔 보겠습니다.
<body>
<h1 id="h1Id">h1 - 1</h1>
<h1 id="h1Id">h1 - 2</h1>
<h1 class="h1Class">h1 - 3</h1>
<script>
const h1 = document.querySelectorAll('#h1Id, .h1Class')
h1.forEach((item) => {
item.style.color = 'Red'
})
</script>
</body>
querySelectorAll을 사용해 id와 클래스 선택자를 함께 선택해서 반환 받았습니다.
forEach 반복문을 사용해 색상을 변경시켜주었고 원하는 결과를 받아냈습니다.
반응형
'Web > JS & TS' 카테고리의 다른 글
| [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) (0) | 2023.01.10 |
|---|---|
| [Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 (0) | 2022.02.07 |
| [Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) (0) | 2022.02.03 |
| [Javascript/자바스크립트] 데이터 타입(Data Type) (0) | 2022.02.01 |
| [Javascript] 변수 선언 var, let, const 차이점과 호이스팅 (0) | 2022.01.29 |
오픈 채팅
댓글