[JavaScript] HTML in JavaScript

1. getElementById

document의 함수 중에서 getElementById 함수는 HTML에서 id를 통해 element를 찾아준다.

<h1 id="title">Hello!</h1>

const title = document.getElementById("title");

console.log(title);
또는
console.dir(title);

dir은 element를 더 자세하게 보여준다.

위에서 한 일들은 HTML을 가지고 오는 것이고, 그걸 JavaScript에서 하고 있는 것이다.
그리고 JavaScript는 이 HTML element를 가지고 오지만, HTML 자체를 보여주지 않는다.
JavaScript는 여러 object를 보여준다.

JavaScript에서 innerText를 변경하는 방법은?

title.innerText = "Hi!";

innerText = Hi

그럼 HTML에서도 title이 변경 됨.
JavaScript에서 HTML이 변경 된 것이다.

정리하자면!!
HTML이 존재한다. 그러나 쓸모없다.
우리는 이 HTML을 JavaScript에서 읽어올 수 있어야 한다.
그래서 HTML과 상호작용을 가능하게 해주고 브라우저에서 그냥 사용할 수 있는 document라는 object가 있다.

document의 함수 중에는 getElementById라는 함수가 있다. 이 함수는 HTML에서 id를 통해 element를 찾아줄 것이다. element를 찾으면 그 HTML에서 무엇이든지 바꿀 수 있다. 예를 들어, element의 innerText를 바꿀 수도 있고, className을 바꿀 수도 있다.