#2-2 JS DOM Functions

준승박 2021. 8. 28. 12:33

DOM Functions?

문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

JavaScript는 HTML에 있는 모든 요소를 가지고 와서 객체로 만든다. 따라서 모든 HTML은 객체가 되는 것이다. 객체는 많은 키를 가지고 있다. 우리가 찾게 될 모든 객체들의 함수를 DOM(Document Object Module) 형태로 변경할 수 있다. 예를 들어보자.

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
      <h1 id="title">This works!</h1>
      <script src="index.js"></script>
  </body>
</html>

[index.js]

const title = document.getElementById("title"); 
title.innerHTML = "Hi from js"; // title의 내용이 바뀐다. 
title.style.color = "red";