#3.0

The Document Object

JS는 HTML과 상호작용하기위해 만들어지는 목적을 가지고 있듯이, JS를 통해 HTML의 Element을 변경하고 읽을 수 있다. 브라우저를 열고 콘솔창에 document를 입력하면 미리 정의된 코드가 보일것이다.

Untitled

자세히 보면 내가 작성한 HTML파일이다. 즉, document는 브라우저에 이미 존재하는 object이다. 우리는 document라는 object를 통해서 HTML을 제어할 수 있게 된다.

브라우저 콘솔창에 Console.dir(document)를 입력하면 document라는 object내용을 볼 수 있는데, object안에 보면 title: “Momentum” 이라는 요소를 볼 수 있다.

Untitled

Momentum은 HTML파일 안에서 <title>태그로 정의한 contant인데 object요소로 있는 것이다. 결국은 JS에서 HTML document 객체로부터 title을 가지고 올 수 있다.

다시 브라우저 콘솔에 document.title이라고 치면 HTML작성Momentum이 반환된다! 읽어오는게 되면 반대로 쓰기도 가능하며 JS에서 변수에 데이터 넣는것처럼 입력하면 된다.

Untitled

위에서 보듯이 지금 관점은 JS에서 HTML코드를 보고있는 것이다. 이럴듯 이미 브라우저통해서 JS와 HTML이 연결되어 있다. 다음은 아래와 같이 코드를 작성해보고 브라우저를 HTML을 실행해보자

document.title = "Hello! From JS!";
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello! From HTML!</title>
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

Untitled

결과물을 보면 HTML이 먼저 동작하고 JS가 동작하는걸 볼 수 있다.

#3.1

HTML in Javascript

아래와 같이 HTML을 입력하고 브라우저 콘솔에서 다음과 같이 입력하고 실행해보자