1. DOM을 이용해 HTML 바꿔보기
- DOM의 의미는 HTML(= Document)을 객체화(Object)하여 사용하는 것을 의미한다.
- 저번 포스팅에서 배운 getElementById를 사용해서 HTML의 특정 엘리먼트 요소를 객체화하여 내용을 바꿔보자.
[기본 HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla JS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 id="title">This works!</h1>
<!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
<script src="index.js"></script>
</body>
</html>
[출력화면]
위의 기본 HTML을 기반으로, h1태그를 객체로 만들어서 내용과 글씨색을 바꿔보도록 하자.
[JavaScript 소스코드]
const title = document.getElementById("title");
title.innerHTML = "This is JAVASCRIPT!!!! ";
[출력화면]
- 위와 같이 HTML을 수정할 수 있는 이유는 title이 JS로 인해 객체화 되었기 때문이다. 그렇다면 객체가 된 title이 갖고있는 정보를 어떻게 확인할 수 있을까?
console.dir(title);
- console.dir()을 이용하면 객체가 갖고 있는 정보를 확인할 수 있으며, 여기에 등장하는 모든 정보들은 개발자가 직접 사용할 수 있는 것들이다.
[JavaScript 소스코드]
const title = document.getElementById("title");
title.innerHTML = "This is JAVASCRIPT!!!! ";
console.dir(title);
[출력결과]
- 위의 GIF에서 볼 수 있듯이, 객체가 갖고 있는 다양한 종류의 정보를 확인할 수 있다.
- 가장 중요한 것은, 저 모든 정보를 JavaScript를 사용해 개발자가 원하는 대로 바꿀 수 있다는 것이다.
document.querySelector();
- document.querySelector()는 전체 HTML에서 특정 엘리먼트를 찾아주는 선택자이다.
- 예제로 getElementById()부분을 querySelector()로 바꿔보자.
[기존 JS코드]
const title = document.getElementById("title");
title.innerHTML = "This is JAVASCRIPT!!!! ";
[querySelector()를 사용한 JS코드]
const title = document.querySelector("#title"); //타이틀은 id속성값이기 때문에 #을 이용해 표현
title.innerHTML = "This is JAVASCRIPT!!!! ";
title.style.color = "white";
[출력화면 - 동일한 화면이 출력되어야 querySelector()가 잘 작동된 것이다.]
'Front-end > Vanilla JS' 카테고리의 다른 글
| Vanilla JS - 조건문(if~else) (0) | 2020.10.08 |
|---|---|
| Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) (0) | 2020.10.07 |
| Vanilla JS - DOM(Document Object Model)(1) (0) | 2020.10.03 |
| Vanilla JS - 기본문법(2) (0) | 2020.10.02 |
| Vanilla JS - 기본문법(1) (0) | 2020.10.01 |
댓글