JavaScript와 HTML의 연결성(2)

이전 강의에서 JavaScript와 HTML은 기본적으로 자동 연결돼있다는 사실을 배웠다..

그 증거로 브라우저의 콘솔창에 자바스크립트로 title을 바꿀 수 있다는 것. 

콘솔창에 document.title = "블라블라" 로 페이지의 타이틀을 변경할 수 있다.

물론 새로고침하면 다시 돌아온다. 그러나 여기서 중요한 것은 

자바스크립트에서 HTML의 항목들을 읽어올 수 있다는 것이다.

이는 HTML의 항목들을 추가할 수 있다는 뜻이다.

 

도큐먼트는 자바스크립트를 통해 html 파일로 접근할 수 있는 방법이다.

html 파일에서 h1 태그에 준 id, title을 js로 가져왔다.

 

js로 id="title"을 가진 H1태그를 가져왔다.

 

자바스크립트 파일에 title을 가져올 title 변수를 만들고 그 변수에 "Got you!" 를 넣어주면?

Html을 그대로인데 위 브라우저의 사진처럼 텍스트가 바뀐 것이 보인다.

HTML에 의해 변경된 것이 아니라 JS에 의해 변경된 것이다.

 

이게 가능한 이유는 ?

1. 바꾸고 싶은 태그의 위치에 id를 추가했기 때문이고 

2. 그리고 js에서 document.getElementById를 통해서 이 element(id가 title)를 가져왔기 때문이다.

(** getElementById란 함수(fucntion)로 가져온 것, 이는 document의 함수이고 여기서 document란 HTML 전체를 뜻한다.)

 

자바 스크립트에서 tite의 id와 클래스 네임을 가져온다면?

 

브라우저에서 그냥 사용할 수 있는 document라는 object

document의 함수 중에는 getElementById라는 함수가 있다.

이 함수는 HTML에서 id를 통해 element를 찾아준다.

 

이를 통해 title.innerText = "Got you!" 와 같이

element의 innerText를 바꿀 수 있고, id와 className을 가져올 수 있다.

따라서 HTML에서 항목들을 가지고 와서 JS를 통해 그 항목들을 변경할 것이다.(프로젝트에서)

 

가령 우리가 Hello yoon!(유저의 네임)처럼 유저에게 hello라고 말하려면

html에서 title을 가져와야하고 

유저명 또한 가져와서 해당 title안에 넣어줘야한다.

 

결론

getElementById를 통해서 엘리먼트를 찾을 수있고, 엘리먼트의 항목들 또한 변경할 수 있는 것이다.

 class name을 가져오거나 추가할 수 있고, text를 가져오거나 변경할 수 있고 (추후 수정)