노마드코더_바닐라js 클론 코딩_#3.1

 

콘솔에 document 입력하면 HTML 볼 수 있음.

-> document는 이미 정의되어 있다.

 

 

 

 

매우매우 중요한 이유!!

 

 

 

 

자바는 HTML에 접근하고 읽을 수 있게 설정이 되어 있다.

 

 

=> 우리는 HTML 코드를 Javascript 관점에서 보고 있다.

 

 

 

 

오우 대박쓰

 

 

 

 

즉, 이미 연결이 되어 있기 때문에 아무 설정도 하지 않아도 된다!

 

 

오우! 이것도 재밌는 사실!

 

 

 

 

 

Java에서 HTML을 읽어올 수 있다는 건 ==HTML에 항목들을 추가할 수 있다는 얘기!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이제 이걸 js 파일에서 해보면

 

 

console.log 보다

console.dir() 이 더 많은 것들을 보여줌!

 

 

 

 

 

 

autofocus

 

 

 

 

 

 

 

**강력크

 

 

 

여기서 우리가 하고 있는건, (콘솔창에서 document보는 중), 

이 html을 가지고 오는 거지만, 

그걸 JavaScript에서 하는거다. 

 

그리고 Javasctript는 이 HTML을 가지고 오지만, HTML 자체를 보여주지는 않는다.

JavaScript는 이 object를 보여준다. 

 

 

 

EX)

자바스크립트에서 클래스 네임은 비어있다. 

 

 

클래스 = "HELLO"를 추가함

 

 

다시 콘솔에서 새로고침을 하고

 

 

콘솔에서 className이 Hello로 바뀐걸 확인할 수 있다.

 

 

 

 

 

우리는 지금 똑같은 element를 보고 있다.

 

 

 

 

InnerText

자바스크립트에서 innerText 를 바꾸니 변경됨

HTML에서 안했는데,

 

 

 

 

가능한 이유 

HTML에:  우리가 id="title"을 추가 했고

JS 파일에서 : 이 element  / title.innerText = "Got You!" 를 가져왔기 때문.

이렇게

 

 

getElementById는 document의 함수이고, 

document는 HTML을 뜻한다.

Java의 관점에서의 HTML.

 

 

우리가 할 수 있는 것

1. document에서 항목들을 가져오는 것

2. 이 document 항목들을 변경한는 것.

 

 

 

 

 

 

 

그렇구나! 제대로 기억하고 있어야겠다!