[Momentum] Clone Coding -07

자바스크립트를 브라우저에 표현하려면, HTML 에 연결을 시켜야 합니다.

 

자바스크립트의 기본적인 기능에 대해 알아 보았으니,

이제 html 로 끌어오는 기능을 보겠습니다.

 

왜? console.log 로 하면, 콘솔창에만 뜨니까, 브라우저 창으로 불러오기 위한 시작을 하겠습니다...

웹 브라우저에서 소스코드를 보면,

html 에 title  이 들어가 있다. 이것을  콘솔창에서 부르고, 수정할 수 있다.

 

이렇게 document.title 을 하면, 현재 페이지의 title 을 확인할 수 있고,

이렇게 하면, title 을 교체 할 수 있다.

 

위에서 보듯이, 자바스크립트는 이미 html 과 연결이 되어 있다.!

<h1 id="title">grap me!</h1>

이렇게 html 에 작성을 해주고,

 

const title = document.getElementById("title");
console.dir(title);

app.js 파일에 이렇게 넣어주면,

상세한 페이지를 볼 수 있다.

dir 는 log 보다 자세하게 표현을 해준다.

 

document.querySelector(".class tag");

querySelector 는 css 처럼 쓸 수 있다.

class 안의 tag 부분을 가져오고 싶을 때, 사용하면 된다.

 

만약 동일한 class 의 tag 가 여러개일 경우, querySelectorAll 을 사용하면 모두 불러진다.

 

 

* querySelector 와 getElementById 는 같은 역할을 할 수 있다.