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>
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");
Last updated
Was this helpful?