JavaScript 강좌 | Method > .querySelector() - CSS 선택자로 요소를 선택하는 속성

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

문법

document.querySelector( 'selector' )

예를 들어

document.querySelector( '.xyz' )

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

예제 1

http://book.cmsfactory.net/JavaScript/V01/method/querySelector-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .querySelector()</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>
      document.querySelector( '.abc' ).style.color = 'red';
    </script>
  </body>
</html>

예제 2

http://book.cmsfactory.net/JavaScript/V01/method/querySelector-02.html

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

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 3.5+
  • Internet Explorer : 8.0+
  • Opera : 10.0+
  • Safari : 3.2+

Created on 2014-12-27 02:06 | Updated on 2017-07-05 21:21

이 글을 공유하기

Kakao

Book navigation