06 Document 도큐멘트에 대한 이해

 

 

도큐멘트 Document에 대한 이해

 

 

 

 

도큐먼트는 브라우저가 이미 갖고 있는 오브젝트를 담고 있으며,

우리가 만든 html을 불러오고 연결할 수 있음을 의미한다.

 

 

 

 

웹브라우저 / 콘솔에 'document'라고 입력하고 엔터를 쳐보자.

 

우리가 작성하고 있는 html 소스를 보여주고 있다.

 

 

이제 콘솔에 'console.dir(document); '라고 입력해 보자.

그럼 도큐먼트의 모든 오브젝트를 볼 수 있다.

 

이 말은 브라우저가 이미 도큐먼트 안에 모든 오브젝트를 담고 있다는 의미다.

즉, 우리가 주로 사용하는 오브젝트와 함수를 이미 브라우저가 담고 있기 때문에, 

우리가 html코드를 짜서 웹에 올리면 이를 읽어서 화면에 보여줄 수 있는 것이다.

즉 브라우저라는 의미는 언어해석기 같은 것이다. 우리가 눈으로 볼 수 있게 화면으로 보여주는 역할인 것이다.

그것이 가능한 것은 이처럼 도큐먼트를 이미 내장하고 있기 때문이며, 자바스크립트로 이를 불러오고 수정할 수 있다는 것을 의미하기도 한다.

 

 

 

 쭉 내려가다 보면 우리가 작성한 내용도 확인이 가능하다.

 

 

여기 보면 title : "Momentum"이라고 되어있지 않은가...

이 말도 원래 다른 이름으로 되었던 title이라는 것을 우리가 바꿔서 저장해서 웹브라우저에 html을 불러와서  띄웠기 때문에 이렇게 그 정보를 확인할 수 있다는 것이다. 우리는 html 코드를 직접 수정하지 않고도 자바스크립트로 이를 불러와 수정하고 추가할 수 있다는 것을 의미한다.

 

우리는 자바스크립트에서 html을 가져다 쓸 수 있고, 또한 변경할 수 있다는 걸 보여주려고 한다.

콘솔에 다음과 같이 작성해 보면 title을 직접 확인할 수 있다.

 

 

그럼 콘솔에서 title을 변경해 보면 어떻게 될까?

 

타이틀 창 이름도 바뀐 걸 확인할 수 있다.

 

요소 창에서도 보면 title이 변경된 걸 볼 수 있다.

 

그러므로, 자바스크립트로 html 파일을 연결하여 사용하기 위해 준비할 게 없다는 것이다. 자바나 플래시처럼 뭔가 프로그램을 다운로드하여서 설치하거나 하는 과정이 전혀 없이 동작하는 이유다.

 

 

 

 

 

 

BR. h