Javascript에서의 DOM Functions

HTML이 Javascript와 함께 웹페이지에 무언가를 쓰려고 하려면, 어떻게 해야 할까?

CSS에서 HTML에 접근할 수 있는 것과 같이 Javascript에서도 HTML에 접근할 수 있다.

 

예를 들어, CSS에서는 HTML에서의 id 값에 접근하려고 할 때, # 기호를 통해 접근한다.

// html에서 아래와 같이 적혀져 있다면,
...
<h1 id = "title"> This is title </h1>
...
// css에서는 이런식으로 접근한다.
#title{color : red ;}

Javascript에서는 DOM 함수를 통해 접근할 수 있다.

console.log 에서처럼 console은 객체이고 log는 함수이다.

 

마찬가지로 'document'도 객체인데, 이게 무엇인지 구글 홈페이지에서 log를 찍어보면,

console.log(document); // document 찍어보기

구글에서 찍은 document

document는 말그대로 해당 페이지에서의 HTML 전체를 가리키는 객체라고 말할 수 있다.

그렇다면, Javascript에서 html에서 표현된 요소에 접근하려면 

document.으로 접근할 수 있는데, 예를 들어 "title"이라는 이름을 가진 id 요소를 가져오고 싶다면, document.getElementById("title"); 로 가져올 수 있다는 뜻이다.

"title"이라는 이름을 가진 id 값 불러오기

그러면, Javascript에서도 html 요소를 다룰 수 있다는 것인데, 위 예제에서 제목 이름을 한번 Javascript에서 바꿔보자.

 

const title = document.getElementById("title"); // title이라는 변수에 제목 가져와서 
title.innerHTML = "This is a changed title !!" // 바꾼다.

javascript로 html에 있는 id 값을 DOM객체로 가져와 바꾸기

"DOM"은 Document Object Module 의 약자이고, 이를 통해 Javascript는 html에 있는 모든 태그를 가져올 수 있고 그것을 객체로 바꿀 수 있는 것이다.