어제의 나보다 성장한 오늘의 나

[JS] 자바스크립트 querySelector 함수 사용법 및 예제 본문

카테고리 없음

[JS] 자바스크립트 querySelector 함수 사용법 및 예제

today_me 2023. 1. 2. 15:45
반응형

 

오늘은 자바스크립트를 통해 html 태그를 다룰 수 있게 도와주는 함수인 querySelector 함수에 대해서 알아볼 것입니다.
querySelector는 getElementby~ 함수들과 비슷합니다.
하지만 id , class , 복합 태그 모두 가져올 수 있기 때문에 더 강력합니다.

 

 

 

 

querySelector()

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환
일치하는 요소가 없다면 null 반환

 

 

 

사용 예시

// javascript

const selected = document.querySelector("h1");

 

 

문서 내의 첫 번째 h1 태그를 찾아 selected에 반환해줍니다.

 

반응형

 

 

 

사용 방법 4가지

1) 태그 select
2) 클래스 select
3) id select
4) 복합 select

 

 

 

이렇게 4 가지에 대해서 알아 볼텐데

아래 html을 예제로 함께 확인 해보겠습니다.

 

// html

<body>
    <h1>h1</h1>
    <h2 class="h2">h2</h2>
    <h3 id="h3">h3</h3>
    <h3>h3_2</h3>
    <div>
        <span>Span1</span>
        <span>Span2</span>
    </div>
    
    <script src="app.js"></script>
</body>

 

 

 

1) 태그 select

 

 

괄호 속에 태그이름을 쓰면 된다.

// javascript

const selected = document.querySelector("h1");
selected.style.color = "red";

 

 

2) 클래스 select

 

 

괄호 속에 .클래스이름을 쓰면된다.

// javascript

const selected = document.querySelector(".h2");
selected.style.color = "red";

 

 

3) id select

 

 

괄호 속에 #id이름을 쓰면 된다.

// javascript

const selected = document.querySelector("#h3");
selected.style.color = "red";

 

 

 

4) 복합 select

 

 

괄호 속에 복합태그이름을 쓰면 된다.

const selected = document.querySelector("div span");
selected.style.color = "red";

 

보는 것처럼 잘 작동한다.

다만 앞에서 말했 듯이 첫 번째 element만 반환한다.

뒤쪽 span에 접근하려면 어떻게 해야 할까??

 

 

 

 

 

4-2) nth-child

 

이렇게 한 태그 안에 여러 개의 태그들이 들어 있을 때는 first-child , last-child , nth-child를 이용하면 된다.

 

 

first-child

//javascript

const selected = document.querySelector("div span:first-child");
selected.style.color = "red";

 

 

nth-child() , last-child

//javascript

//const selected = document.querySelector("div span:last-child"); 마지막 child 선택
const selected = document.querySelector("div span:nth-child(2)");
selected.style.color = "red";

 

 

 

 

 

감사합니다..!

반응형
저작자표시
Comments