Prerequisite

• Visual Studio Code 를 활용하여, HTML, CSS, JS 파일을 열고, 저장하고, 편집할 수 있다.

Achievement Goals

손흥민 되어보기

• 네이버 뉴스의 제목을 querySelector와 textContent를 활용하여 텍스트 조회하고 바꿀 수 있다.

querySelector, textContent

• document.querySelector를 활용하여 웹 페이지의 특정 엘리먼트를 선택할 수 있다.
• textContent를 활용하여 선택한 엘리먼트의 Content를 조회할 수 있다.
• textContent를 활용하여 선택한 엘리먼트의 Content를 고칠 수 있다.

해당 스프린트는 querySelector를 사용하여 DOM에 직접 접근하고 textContent를 사용하여 해당 엘리먼트의 내용을 고칠 수 있는 과제이다.

우선 레포지토리 내부의 index.html을 open with default browser로 들여다보면 화면에 나타난 "hello", "world", "codestates" ID를 갖는 엘리먼트에 각각 "안녕하세요", "여러분", "코드스테이츠"라는 내용을 삽입해야 하는 것을 볼 수 있다.

우리는 html이 구조를, js가 코드를 통한 상호작용을 담당하는 것을 알고 있기 때문에 index.js로 접근한 뒤 아래의 코드를 추가하면 간단하게 스프린트를 해결할 수 있다.

document.querySelector("#hello").textContent="안녕하세요";
// hello라는 ID를 갖는 엘리먼트의 내용을 "안녕하세요"로 나타냄
document.querySelector("#world").textContent="여러분";
// ...
document.querySelector("#codestates").textContent="코드스테이츠";
// ...

Github: Week 1-2 : Sprint - querySelector