#2-2 JS DOM Functions

 

console.log() , calculator.plus() 등과 같이 브라우저에서 우리에게 제공하는 더 많은 다른 함수들이 있습니다.
그래서 함수 파트에서 그냥 쭉 머물 수 있어요. 예를 들면 Calculator로 뭘 만들면서 말이에요. 하지만 이 카테고리에서 하고자 하는 방향은 사실 HTML을 다루는 겁니다. HTML이 자바스크립트와 만나면 어떻게 동작하는지 보여줄거예요.

CSS와 같이 자바스크립트에서도 element를 선택할 수 있습니다. 그래서 변경할 수 있어요. h1을 선택해서 바꿀 수 있는것 처럼요.

 

여기 script.js에서 타이틀을 바꿔볼게요. 오직 자바스크립트 만으로요!

먼저 우리는 연습을 해볼거예요. 보통 어떻게 연습하냐면 This works가 써있는 것을 바꿔야하니까 h2에다가 title이라는 id를 줍니다. id는 그닥 좋아하지 않는데.. 평소엔 class만 써요. 나중에 어떻게 쓰는지 보여줄게요.

id로 뭘 선택 할때는 #을 써서 선택 하는 거 알죠!!?? CSS에서는 #title{} 이렇게 적어요. 그럼 동작합니다.
자 그럼 자바스크립트에서 id로 뭘 선택 하려면 어떻게 해야 할까요? 엄청 간단합니다. 그냥 console 같이 쓰는 거예요.
근데 console 대신에 우린 document 라고 하는걸 쓸겁니다. document 역시 object예요.

console.log(document);를 해보면 요런 document를 줍니다. 전체 document요! document를 대표하는 HTML을 줍니다. HTML document는 자바스크립트가 돼요. console.log나 calculate.plus 같이 document는 많은 .(점)어떤 걸 가지고 있습니다. 

title = document.getElementById("title"); 이렇게 압축해서 쓸 수도 있어요.
그리고 뭔가 매우 중요한 걸 깨달았을 때 무언가를 바꾸고 싶으면 DOM을 씁니다. Document Object Module.
그러면 자바스크립트는 html에 있는 모든 요소를 가지고 올 거고 그걸 객체로 바꿀 것입니다.

const title = document.getElemnetById("title");
title.innerHTML = "Hi From JS";

를 입력하게되면 저 화면은 이제 "Hi! From JS"로 바뀌게 되는 겁니다. 이게 바로 자바스크립트의 힘이에요!

우리가 배울 모든 함수들, 우리가 찾게 될 모든 객체들의 함수들은 DOM(Document Object Model) 형태로 변경 가능합니다. 그럼 다음 글에서 만나요^_^