[ JavaScript ] querySelectorAll()/.querySelector() - CSS 선택자를 선택하는 메서드

프론트엔드/Javascript

클로이겅쥬 2019. 12. 16. 16:39

.querySelectorAll() : 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다.

document.querySelectorAll( '.abc' ) // 는 클래스 값이 abc인 모든 요소를 가져옵니다.
document.querySelectorAll( '.abc, .def' ); // 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다.

<p class="abc">Lorem Ipsum Dolor</p>

var jb = document.querySelectorAll( '.abc' );

jb[1].style.color = 'red';

</script>

-> 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다.

Lorem Ipsum Dolor

.querySelector() : CSS 선택자에 해당하는 첫번째 요소만 선택합니다.

Lorem Ipsum Dolor

<p class="abc">Lorem Ipsum Dolor</p>

<div>

<p class="abc">Lorem Ipsum Dolor</p>

</div>

document.querySelector( 'div .abc' ).style.color = 'red';

</script>

-> 선택된 클래스에서 첫번째 요소에 색을 빨간색으로 만듭니다.

Lorem Ipsum Dolor

[Javascript] strict mode를 사용해야 하는 이유 (0)	2019.12.19
프론트앤드가 알아야 할 용어들 :: 라이브러리 / 프레임워크 / API / UI / UX (0)	2019.12.17
자바스크립트 Event :: addEventListener/ removeEventListener 메서드 (0)	2019.12.17
[자바스크립트] Javascript 개념잡기 i++과 ++i의 차이점 (0)	2019.12.10
[Javascript]함수 선언 var / let / const 차이점 공부하기 (0)	2019.12.10

클로리셔 작은 공간