#2-2 JS DOM Functions

김정호 2021. 8. 27. 23:18

Dom Function

HTML을 JAVASCRIPT와 함께 사용 해보자

<!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>

CSS와 마찬가지로 JAVACSRIPT도 element를 선택이 가능하다.

CSS에서 id로 뭘 선택 할때는 #을 써서 선택해야 한다.

#title {
background-color: #fff;
}

JAVASCRIPT에서 id를 선택하는 방법

const title = document.getElementById("title);

console.log(title);

document.도 역시 객체이다

DOM(Document Object Model)

JAVASCRIPT는 HTML 태그를 가져다가 모두 객체로 만든다.

객체는 많은 키를 가지고 있다. (ex: .log .error .name ....)

innerHTML로 h1 변경하기

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

innerHTML 적용 이후