바닐라 JS로 크롬 앱 만들기 [2-1] Document Object
document: 브라우저에 존재하는 object- 자바스크립트에서 HTML 항목을 가져오고 사용할 수 있다
- 콘솔에서 자바스크립트를 활용해서 HTML을 변경할 수 있다
콘솔에서 HTML 호출
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>valila js</title>
</head>
<body>
<h1 id="title">grab me!</h1>
<script src="web.js"></script>
</body>
</html>
<!--console-->
document.getElementById("title")결과
<h1 id='title">grab me!</h1>
자바스크립트에서 HTML 호출
getElementById
const title = document.getElementById("title");
// 자바스크립트의 title = 불러온 HTML의 title이라는 id 값을 가진 요소
console.dir(title); // console.log도 같은 결과
/* h1#title */outerHTML : <h1 id=\"title\">grab me!
outerText : “grab me!”
const title = document.getElementById("title");
title.innerText = "Got you!";
console.log(title.id);
console.log(title.className);결과
title
hellohtml 요소의 id, className 출력
자바스크립트에서 HTML 변경
const title = document.getElementById("title");
title.innerText = "Got you!";grab me! -> Got you! 로 변경
autofocus
<h1 autofocus class="hello" id="title">grab me!</h1>결과
h1#title.hello
->autofocus를 사용하면 자동으로 true를 갖게 됨
프론트엔드 개발 일기