Wanna be Brilliant Full-Stack Developer

JavaScript On the Browser! 본문

Front-End

JavaScript On the Browser!

Flashpacker 2022. 2. 10. 11:44

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