이제는 가져온 HTML 요소에서 더 정확하게 우리가 원하는 값을 가져올 것입니다.
//index.html
<h1 id="title">나는 제목</h1>
.
.
.
<script src="index.js></script>
//index.js
const title = document.getElementById("title");
예를 들어 여기서 우리가 원하는 값은 title에 현재 있는 <h1 id="title">나는 제목</h1>가 아닌 “나는 제목”이라는 텍스트 자체일 것입니다.
지금부터 이렇게 가져온 HTML 요소에서 더 정확한 값을 찾아내는 방법을 알아볼 것입니다.
위에서의 문제를 해결할 수 있는 방법입니다. HTML 요소 안에 있는 텍스트를 가져옵니다.
//index.js
const title = document.getElementById("title");
console.log(title.innerText); //나는 제목
위와 같이 title.innerText로 우리가 원하는 값인 “나는 제목”에 접근 할 수 있습니다.
//index.js
const title = document.getElementById("title");
title.innerText = "새로운 제목";
위와 같이 “나는 제목”이라는 값을 바꿀 수도 있습니다.
input 태그의 현재 써져 있는 값을 가져옵니다.
현재 위의 input 태그에 “계획을 적는중”이라는 값을 적는중입니다. 이때 “계획을 적는중”이라는 글씨를 받아올 수 있는 method가 value입니다.
const plan = querySelector("input");
console.log(plan.value); //계획을 적는중
아래와 같이 써 있는 값을 바꿀 수도 있습니다.
const plan = querySelector("input");
plan.value = "계획 적지마";