HTML 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>valila js</title>
</head>
<body>
<h1 id="title">marmot</h1>
<script src="자바스크립트 문서 이름"></script>
</body>
</html>
HTML에
'<script src="자바스크립트 문서 이름"></script>'
를 넣어야 자바스크립트에서 HTML을 사용할 수 있다.
자바스크립트에서 HTML 불러오기
const title = document.getElementById("title");
// title = 불러온 HTML의 title이라는 id 값을 가진 요소
console.dir(title); // console.log도 같은 결과
/* h1#title */
title = HTML 문서의 title이라는 id 값을 가진 요소라고 선언 하는 것
console.dir을 활용하면 콘솔에서 title에 대한 여러 값들을 자세하게 볼 수 있음
자바스크립트에서 HTML 변경하기
const title = document.getElementById("title");
title.innerText = "choimarmot";
/* marmot! -> choimarmot */
id와 className 출력
const title = document.getElementById("title");
title.innerText = "Got you!";
console.log(title.id);
console.log(title.className);
/* title
hello */
'JavaScript' 카테고리의 다른 글
| [JavaScript] Event (0) | 2023.11.10 |
|---|---|
| [JavaScript] getElements, querySelector 차이 (0) | 2023.11.10 |
| [JavaScript] Conditional(조건문) (0) | 2023.11.10 |
| [JavaScript] prompt, typeof, parseInt, isNaN (0) | 2023.11.09 |