HTML 이 JS 와 함께 쓰일 때 어떻게 동작하는가?
- 이미 존재하는 함수를 배워보기
- css 와 같이 자바스크립트에서도 element 를 선택할 수 있다.
: css 에서는 선택자를 통해 style.css 에 html element를 선택했었다.
ID 를 사용
- HTML 에 바꾸고자 하는 태그에 id 를 준다. 방법은,
: console 대신 document. 을 쓴다. console.log(document) 라 하면 너무 많이가지고 있어서인지 안나온다. 여튼 객체(object) 이다. 일단 그렇다니까 그렇다 치자.
적용하는 코드
- HTML 내 제목인 < h1 > 코드에 id = title 을 주었다.
- HTML 에서 ID 로 정의한 부분을 JS 에서 정의하려면 아래와 같은 코드를 사용한다.
const title = document.getElementById
("title");
console.log(title);
run 돌려보면!
HTMLHeadingElement {} 이렇게 뜬다. 헤딩 요소다 알려주는 건가?- 이걸 DOM 이라 한다.
DOM (Document Objective Module)
-
자바스크립트는 선택한 HTML 요소를 가져와서 모두 객체 (object) 로 바꿀 것이다. 객체는 많은 키를 가지고 있다.
-
HTML 에서 JS 로 선택한 것은 객체가 된다. 모든 HTML 이 객체가 된다.
const title = document.getElementById
("title");
title.innerHTML = "Hi From JS!" --------> title. 이게 객체가 되어
많은 키를 가지는가 보구나?!- 위의 코드를 입력하니까, < h1 > 태그 내 컨텐츠가 "Hi From JS!" 로 바뀌어 보인다.
- 콘솔 내에서는 바뀌어 보이지만, 코드 에디터 내에서 html 을 확인해 보면 실제로 HTML 의 컨텐츠는 바뀌지 않고 그대로 이다.
결론 : 우리가 배울 모든 함수들은, 우리가 찾게 될 모든 객체들의 함수들을 DOM 형태로 변경 가능하다. (뭔말이지 ㅠ)
- 페이지에서 자바스크립트로 선택한 거는 객체가 된다.
.