Soony's House

[JS] querySelector(), querySelectorAll() 본문

✶Language/Javascript

[JS] querySelector(), querySelectorAll()

soonybutter 2024. 8. 11. 16:18
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

'✶Language > Javascript' 카테고리의 다른 글

[JS] 자바스크립트 배열 Json타입 변환, ajax를 통해 controller에 넘기기  (0) 2025.01.05
[JS] 자바스크립트 문자열 공백 제거하기 - trim() , replace()  (7) 2025.01.04
[JS] 속성 선택하기 - .value / .innerHTML / .textContent 비교  (2) 2024.08.06
[JS] 자바스크립트 연산자 우선순위  (3) 2024.01.09
[JS] 자바스크립트 연산자 / 형변환  (0) 2024.01.09
'✶Language/Javascript' Related Articles more