JavaScript 강좌 | Method > .querySelectorAll()

.querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 반환하는 속성입니다.

문법

document.querySelectorAll( 'selector' )

예를 들어

document.querySelectorAll( '.abc' )

는 클래스 값이 abc인 모든 요소를 반환합니다.

예제 1

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .querySelectorAll()</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc' );
      jb[1].style.color = 'red';
    </script>
  </body>
</html>

예제 2

클래스 값이 abc인 모든 요소를 빨간색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .querySelectorAll()</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc' );
      for ( var i = 0; i < jb.length; i++ ) {
        jb[i].style.color = 'red';
      }
    </script>
  </body>
</html>

예제 3

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .querySelectorAll()</title>
  </head>
  <body>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="abc">Lorem Ipsum Dolor</p>
    <p class="def">Lorem Ipsum Dolor</p>
    <p>Lorem Ipsum Dolor</p>
    <script>
      var jb = document.querySelectorAll( '.abc, .def' );
      for ( var i = 0; i < jb.length; i++ ) {
        jb[i].style.color = 'red';
      }
    </script>
  </body>
</html>

Created on 2015-01-26 17:23 | Updated on 2017-12-09 00:14