HTML : h1 태그 생성
<h1 id="title">Grab me!</h1>
JS로 정보를 가지고 올 수 있는 방법은, document 객체와 element를 가져오는 수 많은 함수들을 이용하는 거다.
오늘 배울 것은 정말 자주 사용한다!!!!!
getElementById
콘솔에 document.getElementById("title") 를 입력하면 JS로 id="title"을 가진 h1 태그를 가져온다!
우리는 이걸 콘솔이 아닌 JS파일에서 호출할 것이다!
const title = document.getElementById("title"); console.log(title);콘솔에서 했을때와 같은 결과값을 가진다.
element를 더 자세하게 보여주는 console.dir()을 사용해보자.
console.dir(title);
h1 태그 하나에서 가져올 수 있는 많은 것들이 출력된다. 우린 JS에서 HTML을 읽을 수 있다.
우리가 하고 있는건 HTML을 가지고 오는거지만, 그걸 JS에서 하고 있는거다. 그리고 JS는 HTML element를 가지고 오지만, HMTL 자체를 보여주지는 않는다. JS는 Object를 보여준다.
우리는 불러오는 것뿐만 아니라 값을 수정할 수 있다.
const title = document.getElementById("title"); title.innerText = "Got you!"새로 고침하면 Grab me!가 Got you!로 바뀌어서 화면에 출력된다.
검사 > Elements 에서도 텍스트가 변경된것을 확인할 수 있다.
HTML 파일은 변경되지 않는다.
- document는 JS 관점에서의 HTML을 뜻한다. element를 찾고나면 무엇이든지 할 수 있다.
- getElementById란 함수를 통해 id로 HTML element를 가져올 수 있다.
