바닐라 자바스크립트 시작(3)

자바과정/자바스크립트

바닐라 자바스크립트 시작(3)

Parkej 2021. 9. 23. 14:54

출처 및 참고 :

- 노마드 코더 챌린지 바닐라 자바스크립트로 크롬 앱 만들기 : https://nomadcoders.co/

- HTML Document Reference : https://developer.mozilla.org/ko/

복습 차원

* 꼭 이해해야 할 거 : 우리가 하고 있는 app.js가 있기 때문에 javascript를 통해 HTML의 내용을 가져올 수 있는 것이다

* 좀더 구체적인 엘리먼트를 선택 : querySelector , querySelectorAll

- getElement ~~ 보다 구체적으로 element를 지정 가능하다.

* 포인트 : document가 HTML이 app.js를 load하기 때문에 존재하는 것임. 그 다음에 브라우저에서 우리가 document에 접근할 수 있게 해준다.

# querySelector, querySelectorAll

const title = document.querySelector(".hello h1");
title.innerText = "Hello time";

- 위의 코드에서 querySelector가 의미하는 바는 무엇일까 ?

    <div class="hello">
        <h1>Grab me!1</h1>
    </div>
    <div class="hello">
        <h1>Grab me!2</h1>
    </div>
    <div class="hello">
        <h1>Grab me!3</h1>
    </div>

바로 " hello 라는 class 내부의 h1을 가지고 온다. " 라는 뜻이다.

그리고 이렇게 여러 방법으로도 가능하다

const title = document.querySelector(".hello"); // 해당 코드의 의미 : hello란 class를 가진 element를 하나 가지고 올 수 있다. 
const title = document.querySelectorAll(".hello"); // hello라는 이름의 class를 전부 가져올 수 있다.
const title = document.querySelector("#hello:first-child"); 
const title = document.querySelector(".hello:first-child h1");

const title = document.querySelector("div.hello:first-child h1");  // class hello를 가진 div 내부의 first-child인 h1을 찾아오는 것. css selector를 전달할 수 있다.
// javascript는 여기 해당 element에 접근할 수 있게 해준다.

querySelectorAll은 아래와 같이 쓸 수 있다.