DOM

PreviousFunction NextEvent & Event handler

Last updated 3 years ago

Was this helpful?

DOM

DOM(Document Object Module)

Document 객체와 관련된 객체의 집합을 의미

1. DOM을 이용한 HTML의 객체 불러오기/출력

JavaScript는 HTML에 있는 모든 요소를 가지고 와서 객체로 만듦

따라서 모든 HTML은 객체가 되며, 객체는 많은 키를 가지고 있음

우리가 찾게 될 모든 객체들의 함수를 DOM(Document Object Module) 형태로 변경 할 수 있음

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

//HTML을 DOM 객체로 바꿀 수 있음(압축)
const title = document.getElementById("title");
title.innerHTML = "Hi! From JS"; //HTML #title의 값을 Hi! From JS로 바꿀 수 있음

1-1. console.dir();

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

console.dir(document);

2. DOM을 이용한 HTML 값 수정

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

title.style.color = "red"; //#title의 텍스트 색을 red로 변경 (따옴표 잊지말자!)
document.title = "I own you now"; //문서명 변경

3. querySelector

노드의 첫번째 자식을 선택하여 반환

const title = document.querySelector("#title");

PreviousFunction NextEvent & Event handler

Last updated 3 years ago

Was this helpful?