이번 편에서는, JS를 이용해서 브라우저에 대해 조금 더 이해해보는 시간을 가질거다!
듣고 나면 JS가 어떻게 브라우저를 어떻게 움직이게 하는지 알게 된다.
-
JS를 사용하는 이유는 HTML과 상호작용하기 위해서다.
= HTML의 Elements들을 JS를 통해 변경하고, 읽을 수 있다는거다!! -
콘솔에 document를 입력하면, 작성한 HTML을 가져올 수 있다.
= document는 브라우저에 이미 존재하는 object다.
= 우리가 접근할 수 있는 HTML을 가리키는 객체이다. -
콘솔에 console.dir(documnet) 를 호출하면, 정보가 나온다. documnet는 그저 object일 뿐이다. 정말 많은 것들이 들어있는 object이다. 그 중 documnet.title : "Momentum" 이라고 되어있다. 이건 정말 흥미롭다. 왜냐하면 title이란 항목은 여기 HTML에 내가 정의한 항목이기 때문이다. 나는 JS에서 title을 정의한 적이 없다. 즉, document가 HTML을 보여주는 것이다. 하지만, JS의 관점으로 보여주는거다!!! 내가 JS에서 HTML document 객체로부터 title을 가지고 올 수 있어서다.
콘솔에 document.title을 입력하면, 'Momentum' 가 출력된다.
=> JS는 HTML에 접근하고 읽을 수 있게 설정이 되어 있다.
=> JS는 HTML을 읽어오는거다. 이건 자동적으로 되는거니까 아무것도 해줄 필요가 없다.
브라우저가 HTML 정보가 아주 많이 들어있는 document라는 object를 전달해주는거다.
우리가 object 강의에서 배웠던것을 생각해보면, object에서는 property를 가지고 올 수 있었다. 그리고 값을 바꿀 수도 있었다.
만약에 document.title 항목을 변경하면 어떻게 될까?
콘솔에 document.title = "hi" 입력하고, 엔터를 치면 브라우저의 title이 hi로 바뀐다!!
물론 새로고침하면 다시 돌아감ㅎㅎ
JS에서 HTML을 읽어올 뿐만 아니라, HTML을 변경할 수도 있다.
우리는 HTML과 JS를 연결하기 위해서 아무것도 하지 않아도 된다. 브라우저가 여러분에게 많은게 들어있는 document 객체를 주기때문이다.
이미 서로 연결되어있다. 그리고 모든 것들은 document로 부터 시작한다. 왜냐하면 document는 여러분의 web site를 의미하기 때문이다.
