JavaScript / Object / document.querySelector() / 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

.querySelector()

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

문법

document.querySelector( 'selector' )

예를 들어

document.querySelector( '.xyz' )

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

예제 1

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</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

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</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>

Related Posts

JavaScript / 함수 / isNaN() / 매개변수가 숫자인지 검사하는 함수

JavaScript / 함수 / isNaN() / 매개변수가 숫자인지 검사하는 함수

isNaN() isNaN() – 매개변수가 숫자인지 검사하는 함수입니다.(NaN은 Not a Number입니다.) 문법 isNaN( value ) value : 검사할 값을 입력합니다. 매개변수가 숫자가 아니면 true, 숫자이면 false를 반환합니다. 예제 123.123은 숫자이므로 false를 반환합니다. ‘123.123’은 따옴표로 감쌌지만, 숫자로 취급하여 false를 반환합니다. ‘Not a Number’는 숫자가 아니므로 true를 반환합니다. 123*123은 숫자이므로 false를 반환합니다. ‘123*123’은 따옴표 안에 문자가 있으므로 숫자가 아닌 것으로 취급하여 true를 반환합니다. <!doctype html> <html ...

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

JavaScript / 함수 / Number() / 문자열을 숫자로 변환하는 함수

Number() Number()은 문자열을 숫자로 변환하는 함수입니다. 문법 Number( object ) object : 문자열 또는 문자열을 값으로 하는 변수 등을 입력합니다. 숫자로 변환할 수 없는 값인 경우 NaN을 반환합니다. 예제 변수 c의 값은 문자 1과 문자 2를 더한 12입니다. 변수 d의 값은 숫자 1과 숫자 2를 더한 3입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

.concat() .concat() 속성을 이용하여 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있습니다. 문법 var jbAry2 = jbAry1.concat( 'abc' ); jbAry1 배열에 문자열 abc를 추가하여 jbAry2 배열을 만듭니다. var jbAry3 = jbAry1.concat( jbAry2 ); 두 배열 jbAry1과 jbAry2를 합하여 새로운 배열 jbAry3을 만듭니다. 예제 다음의 두 예제는 같은 결과를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do – while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

JavaScript / Object / document.title / 문서의 제목을 가져오거나 변경하는 속성

.title .title 속성으로 문서의 제목을 가져오거나 변경할 수 있습니다. 문법 1 document.title 문서의 <title> 태그의 내용을 반환합니다. 문법 2 document.title = 'ABC' 문서의 <title> 태그의 내용을 ABC로 바꿉니다. 예제 문서의 제목 JavaScript를 출력하고, 제목을 CODING FACTORY로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write ( '<p>' ...

JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성

JavaScript / Object / Element.childElementCount / 자식 요소의 개수를 반환하는 속성

.childElementCount .childElementCount는 자식 요소의 개수를 반환하는 속성입니다. 바로 아래 단계에 있는 자식 요소의 개수만 세고, 자식 요소의 자식 요소의 수는 세지 않습니다. IE는 버전 9 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <ul> <li>Lorem</li> <li>Ipsum <span>Dolor</span></li> </ul> <script> var jb = document.getElementsByTagName( ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

Lazy Loading 웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다. 이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다. Lozad.js Lozad.js는 Lazy ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript 강좌