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 / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

JavaScript / 함수 / eval() / 문자열을 코드로 인식하게 하는 함수

eval() eval()은 문자열을 코드로 인식하게 하는 함수입니다. 문법 eval( string ) 예를 들어 eval( '2+2' ) 는 문자열 2+2가 아니라 계산한 결과 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = '2+2'; document.write( '<p>' + jb + '</p>' ); document.write( '<p>' + eval( jb ) + '</p>' ); </script> </body> </html>

JavaScript / 함수 / parseFloat(), parseInt() - 문자열을 수로 바꾸는 함수

JavaScript / 함수 / parseFloat(), parseInt() - 문자열을 수로 바꾸는 함수

parseFloat() parseFloat()는 문자열을 실수로 바꾸는 함수입니다. 문법 parseFloat( string ) 수로 시작할 때 그 수를 실수로 바꿉니다. 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꿉니다. 공백으로 시작하면 공백은 무시합니다. 수가 아닌 문자로 시작하면 NaN을 반환합니다. 예제 <!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>parseFloat( '12.34' ) : " + parseFloat( '12.34' ) + "</p>" ); document.write( "<p>parseFloat( ' 12.34' ...

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

.indexOf() .indexOf()는 주어진 값과 일치하는 요소의 인덱스를 반환하는 메서드입니다. 문법 array.indexOf( value, start ) value : 찾으려는 값을 넣습니다. start : 검색을 시작할 인덱스 값입니다. 생략 가능하고, 생략했을 경우 값은 0입니다. 일치하는 원소가 있다면 인덱스를 반환합니다. 여러 개 있으면 처음 원소의 인덱스를 반환합니다. 없다면 -1을 반환합니다. 예제 배열 원소의 인덱스는 0부터 시작합니다. 즉, 첫번째 원소의 인덱스는 0, 두번째 ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

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 / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

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 / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

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

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

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

JavaScript / Object / Math.log(), Math.log10(), Math.Log2()

Math.log(), Math.log10(), Math.Log2() Math.log() : 자연로그의 값을 반환합니다. Math.log10() : 상용로그의 값을 반환합니다. Math.Log2() : 밑이 2인 로그의 값을 반환합니다. 문법 Math.log( number) Math.log10( number ) Math.Log2( number) number에는 숫자가 들어갑니다. 0인 경우 -Infinity, 음수인 경우 NaN을 반환합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

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 강좌