#3.0
JS는 HTML과 상호작용하기위해 만들어지는 목적을 가지고 있듯이, JS를 통해 HTML의 Element을 변경하고 읽을 수 있다. 브라우저를 열고 콘솔창에 document
를 입력하면 미리 정의된 코드가 보일것이다.
자세히 보면 내가 작성한 HTML파일이다. 즉, document
는 브라우저에 이미 존재하는 object
이다. 우리는 document라는 object를 통해서 HTML을 제어
할 수 있게 된다.
브라우저 콘솔창에 Console.dir(document)
를 입력하면 document라는 object내용을 볼 수 있는데, object안에 보면 title: “Momentum”
이라는 요소를 볼 수 있다.
Momentum은 HTML파일 안에서 <title>태그로 정의한 contant인데 object요소로 있는 것이다. 결국은 JS에서 HTML document 객체로부터 title을 가지고 올 수 있다.
다시 브라우저 콘솔에 document.title
이라고 치면 HTML
에 작성
한 Momentum
이 반환된다! 읽어오는게 되면 반대로 쓰기도 가능하며 JS에서 변수에 데이터 넣는것처럼 입력하면 된다.
위에서 보듯이 지금 관점은 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>
결과물을 보면 HTML이 먼저 동작하고 JS가 동작하는걸 볼 수 있다.
#3.1
아래와 같이 HTML을 입력하고 브라우저 콘솔에서 다음과 같이 입력하고 실행해보자
document.getElementById("title")