Wanna be Brilliant Full-Stack Developer
JavaScript On the Browser! 본문
HTML에 있는 title과 같은 코드를 자바스크립트로 가져다 쓸 수 있다!
자바스트립트에서 HTML을 읽어올 뿐만 아니라 , HTML을 변경할 수도 있다!
이것을 통해 알수 있는것은 Javascript가 HTML에 이미 연결 돼 있다는 것을 배울 수 있다.
document라는 object로 document.title , document.body (와 같이 document는 우리가 자바스크립트에서 Html에 접근할 수 있는 방법이다.
document.getElementbyId("title") 로 HTML에서 id중에 title(should be string) 을 가지고 있는 데이터를 가져올수있다.
const title = document.getElementById("title");
console.dir(title);
console.dir을 하면 element를 더 자세하게 보여준다!
const title = document.getElementById("title");
title.innerText = "Got you! "
console.log(title.id);
console.log(title.className);
결론: document는 HTML과 상호작용을 가능하게 해주는 object이고
document의 함수 중에는 getElementById라는 함수가 있다. 이 함수는 HTML에서 id를 통해 element를 찾아준다.
element를 찾고나며 , 그 HTML에서 뭐든지 바꿀수 있다.
어떻게 동작하는지 명확하게 이해하는것이 중요하다!
우리는 HTML에서 항목들을 가지고와서 , 자바스크립트를 통해 항목들을 변경할것이다!
두가지의 방법을 오늘 배웠는데
첫번째는 document에서 항목들을 가지고 오는것
두번쨰는 이 document 항목들을 변경하는것
'Front-End' 카테고리의 다른 글
JavaScript Event (0) | 2022.02.11 |
---|---|
JavaScript Searching For Elements! (0) | 2022.02.10 |
JavaScript Conditionals (조건문) (0) | 2022.02.10 |
JavaScript Returns (0) | 2022.02.10 |
JavaScript Recap (Variable , Array , Function ) (0) | 2022.02.10 |