<vanilla JS#2.2 JS DOM Functions>

insum·2019년 8월 28일
0

Vanilla JS

목록 보기
6/6

요약
1. html에 있는 요소를 자바스크립트로 가져와서 객체로 만드는 과정(자바스크립트로 선택한 모든것은 객체가 된다.)
2. 함수들, 객체들의 함수들 모두 DOM형태로 변경이 가능하다

1) index.html에서
h1태그에 title이라는 id를 부여
html js2.png

2) index.js에서
index.html에 있던 h1을 선택한 모습

20190828_154801.png

3) index.html 파일을 크롬에서 보면 이렇게 연결된 걸 볼 수 있다.
html js.png

DOM__Document Object Model

document에 있는 모든건 자바스크립트에서 다 객체가 될거야.
이렇게 index.js에서 h1태그 id title 선택해 놓고

일단 먼저 브라우저 보면,
resu.png

이런 상태에요 html에서 ▼
resu1.png

index.js로 가서 title(h1태그 선택한 id이름이죠)을 아래처럼
title객체에서
innerHTML이라는 를 이용해서 텍스트를 바꾸니까

resujs1.png

브라우저 상에서 이렇게 자바스크립트에서 객체 선택한 다음에 값 바꾸니 변경이 되었어요.
resujs2.png

profile
Hello!

0개의 댓글