자바스크립트 (9) - js와 html의관계. document 객체

이제 프로그래밍 기초를 뒤로하고 자스와 html 이 서로 어떻게 동작하는지 살펴본다. 

 

파이썬도 function object arrays if -else 등 다 있고 생긴것 만 다르다. 

 

이번엔 브라우저에 초점을 맞춰보자.

 

자스가 브라우저를 어떻게 움직이는가? 

 

html 은 접착제 같은 거다. html이 css와 js를 가져오니까 . 

 

자스를 쓰는 이유는 html을 반응형으로 만들기 위해서. 

 

html은 엘리멘트들을 자스를 통해 변경하고 읽을 수 있다.

 

콘솔에 document 를 입력하면html 코드들이 표시된다.

이미 브라우저에 html을 가리키는 객체로 존재하는 오브젝트이기 때문에 콘솔에 입력하면 표시되는거다.

 

console.dir(document)를 해보면 document 는 그냥 object 일 뿐이다. 

 

console.log는 요소를 HTML과 같은 트리 구조로 출력 하고, DOM 요소에 대해 특별한 처리를 제공.   

console.dir은 요소를 JSON과 같은 트리 구조로 출력 하고, DOM JS 객체의 전체 표현을 보려고 할 때 유용.   

객체는 dir, 나머지는 log로 로깅하면 편하다.

 

document.title 을 보면 title : "Momentum" 이라고 되어 있다. 사실 우리가 자스에서 title을 만져준적이 없다.

 

즉 document 는 html 을 보여주는 것이다. 하지만 자스의 관점에서 보자면 이게 object 처럼 보인다. 

 

어쨌든 자스에서 html document 객체로부터 title 을 가져올 수 있다. 

 

자스는 자동적으로 html 에 접근하고 읽어올 수 있게 설정이 돼 있다. 

 

html정보가 많이 들어있는 document 객체에서 정보를 반환해주고 있는 것.

 

객체에서 정보를 가져올 수도 있고 수정 할 수도 있음.

document.title = "Hi"

 

html 에서 타이틀을 바꿔도

 

자스에 객체값 변경해주고 새로고침 해주면 바뀜. 

 

document 는 웹사이트 자체를 의미함. 

document.body 하면 body 만 또 가져옴.

 

어떻게 폼을 생성하고 어떻게 자스로 가져올 것인가? 등을 공부할 것.

 

document.location 하면 웹 페이지 경로도 볼 수 잇음.