document.title, document.body 을 호출 가능 (console 창에서)
document는 우리가 javascript 에서 HTML에 접근할 수 있는 방법이다.
document는 브라우저에서 그냥 사용할 수 있는 object임.
document.getElementById("title")
getElementById => string을 전달받는 함수
const title = document.getElementById("title")
#getElementById는 HTML에서 id를 통해 element를 찾아준다.
console.dir(title)<body>
<h1 id="title">Grab me!</h1>
<script src="app.js"></script>
</body>HTML을 가지고 오는거지만, 그걸 JavaScript에서 하고 있음.
JavaScript는 이 HTML element를 가지고 오지만, HTML 자체를 보여주지는 않음.
element를 찾고 나면 그 HTML에서 뭐든지 바꿀 수 있음.
const title = document.getElementById("title")
title.innerText = "Got you!" # element의 innerText를 바꿀 수도 있음.
console.log(title.id) # element의 id와 className을 가져오는 것도 가능.
console.log(title.className)
따라서 우리는 이제 HTML에서 항목들을 가지고 와서 JavaScript를 통해 항목들을 변경할 수 있음.
예를 들어, 우리가 Hello DS처럼 유저에서 Hello라고 말하려면 우리는 HTML에서 title을 가지고 와야하고 유저명 또한 가져와서 해당 title 안에 넣어줘야함.
'웹 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 (2-3 return, prompt, if) (0) | 2023.03.16 |
|---|---|
| 자바스크립트 (2 - 2 object, function) (2) | 2023.03.16 |
| 자바스크립트 (2 - 1) (2) | 2023.03.16 |
| 자바스크립트 (1 - 준비) (0) | 2023.03.13 |