728x90
querySelector() 과 querySelectorAll()의 차이에 대해 정리해보자.
querySelector()
- document.querySelector()은 문서 내에서 입력한 선택자와 일치하는 첫 번째 요소를 반환한다.
- 만약 일치하는 요소가 없으면, null을 반환한다.
<script>
function clickMe(){
const doc= document.querySelector("#first >.Happy");
console.log(doc);
doc.style.backgroundColor="green";
}
</script>
<div id="first">
<p class="Happy">오늘은 일요일!</p>
<p class="Happy" onclick="clickMe()">나는 너무 행복해!</p>
<p class="Happy">너도 행복하니?!</p>
</div>
querySelectorAll()
- querySelectorAll()은 입력한 선택자와 일치하는 모든요소를 반환한다.
- 반환 타입이 배열(리스트)임으로, 인덱스를 통해 조작할 수 있다.
0번째 인덱스의 요소의 배경색에 변화를 줘보자!
*애초에 list로 담은 것을 확인할 수 있다.
<script>
function clickMe(){
var list = document.querySelectorAll(".Happy");
list[0].style.backgroundColor = "pink";
}
</script>
<body>
<p class="Happy" onclick=clickMe()>오늘은 일요일!</p>
<p class="Happy">나는 너무 행복해!</p>
<p class="Happy">너도 행복하니?!</p>
</body>
배경색에 변화가 생긴것을 확인할 수 있다.
틀린 부분이나 이상한 부분이 있으면 댓글로 지적해주세요!
감사합니다 :)
728x90
'💻 > Javascript' 카테고리의 다른 글
| [JS] 자바스크립트 배열 Json타입 변환, ajax를 통해 controller에 넘기기 (0) | 2025.01.05 |
|---|---|
| [JS] 자바스크립트 문자열 공백 제거하기 - trim() , replace() (0) | 2025.01.04 |
| [JS] 속성 선택하기 - .value / .innerHTML / .textContent 비교 (2) | 2024.08.06 |
| [JS] 자바스크립트 연산자 우선순위 (0) | 2024.01.09 |
| [JS] 자바스크립트 연산자 / 형변환 (0) | 2024.01.09 |
