특정 CSS 선택자를 가진 요소 선택하는 방법 - document querySelector() document querySelectorAll()

document querySelectorAll()

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

 

기본

document.querySelectorAll( 'selector' )

예를 들어

document.querySelectorAll( '.abc' )

는 클래스 값이 abc인 모든 요소를 가져옵니다.

document.querySelectorAll( '.abc, .def' );

클래스 값이 abc 또는 def인 모든 요소를 가져옵니다.

 

예제 1

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

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

var lb = document.querySelectorAll( '.abc' );
lb[1].style.color = 'red';

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

클래스 값이 abc인 모든 요소를 빨간색으로 만듭니다.

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

var lb = document.querySelectorAll( '.abc' );
for ( var i = 0; i < lb.length; i++ ) {
  lb[i].style.color = 'red';
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 3

클래스 값이 abc 또는 def인 요소의 색을 빨간색으로 만듭니다.

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

var lb = document.querySelectorAll( '.abc, .def' );
for ( var i = 0; i < lb.length; i++ ) {
  lb[i].style.color = 'red';
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

document querySelector()

document.querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다.

 

기본형

document.querySelector( 'selector' )

 

예를 들어

document.querySelector( '.xyz' )

는 클래스 값이 xyz인 첫번째 요소에 접근합니다.

 

예제 1

클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다.

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

div의 하위 요소 중 클래스 값으로 abc를 갖는 첫 번째 요소를 빨간색으로 만듭니다.

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.