JS_3 (DOM)

- getElementById

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

HTML에서 id 가 title인 곳을 찾아오게 된다. 이를 console.log로 찍어서 확인해보면!!

이런식으로 나오게 된다.

그런데 이를 바꿀 수 있다!!! (응? HTML에 쓰여져 있는걸 바꿀 수 있다고..?)

title.innerHTML = "HI! I changed in JS!"

왼쪽은 Visual Code 에서 HTML이고, 오른쪽은 해당 페이지의 소스를 보여주는 화면이다.

그냥 써있는 내용까지 다 바뀌었다.

 

같은 방법으로 글자 색을 바꿀 수도 있다.

title.style.color = red;

 

console.dir을 통해서 title로 innerHTML나 style.color 처럼 할 수 있는 것을 모두 볼 수 있다.

 

 

- DOM

 

여기서 DOM(Document Object Model)이라는 것을 알아야 한다.

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

console.log(title);

title은 doc.....; 까지 압축된 것이다. 이를 DOM 이라 부른다.

JS는 HTML에 있는 모든 자원들을 가져와서 Object로 바꾼다.

DOM은 자원의 역할이 되어 수정할 수 있지만, HTML은 아니다. 단지, HTML을 조종한다고 생각하면 될 듯 싶다.

수정은 JS를 통해서 가능하다.

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

const title = document.querySelecotr('#title');
const title = document.querySelecotr('.title');

ID나 class가 title 인 것을 가져온다.