#3.0 The Document Object
JavaScript is already connected to the HTML
JavaScript로 HTML에 접근, 읽을 뿐만 아니라 변경할 수 있도록 설정이 되어있다
ex. HTML에 있는 title을 자바스크립트로 접근, 변경할 수 있다
document - JavaScript에서 HTML에 접근(상호작용)할 수 있는 방법
기작성된 HTML 문서(web site)를 가리키는 object(w. lots of properties)이다.
console.dir(document); // document라는 object 모습을 보여준다 document.title; // 접근 document.title = "Hello! From JS"; // 변경
#3.1 HTML in Javascript
JavaScript 나라에서 document(JS 관점에서의 HTML)를 소환하고 있다
JavaScript는 id가 "title"인 HTML element를 가지고 오지만, HTML 자체를 보여주진 않는다. id가 "title"인 h1 태그의 object 모습을 보여준다.
app.js
const title = document.getElementById("title");
console.log(title); // <h1 id="title">Grab me!<h1>
console.dir(title); // title이라는 id를 가진 h1태그의 object 모습을 보여준다JavaScript에 의해 변경됨. HTML에 의한 것이 아님.
가능한 이유는 HTML에 id="title"을 생성, 자바스크립트 document 객체의 getElementById() 함수로 h1 태그(element)를 불러옴.
const title = document.getElementById("title");
title.innerText = "Got you!";#3.2 Searching For Elements
JS에서 HTML element를 가져오고 검색하는 방법
const hellos = document.getElementsByClassName("hello");
console.log(hellos); // HTMLCollection(5) [h1.hello, h1.hello, h1.hello, h1.hello, h1.hello] ---> array<body> <div class="hello"> <h1>Grab me!</h1> </div> <script scr="app.js"></script> </body>const title = document.getElementsByTagName("h1"); console.log(title); // HTMLCollection [h1] ---> array
element를 가져오는 가장 멋진 방법
- querySelector - element를 CSS 방식으로 검색할 수 있다: class="hello" 내부에 있는 '단 하나의 (1st)' h1을 가지고 올 수 있다(CSS selector)
- querySelectorAll - selector 안의 조건에 부합하는 모든 element를 array로 보여준다
const title = document.querySelector(".hello h1");
title.innerText = "Hello";const title = document.querySelector(".hello:first-child h1");
console.log(title);비교
const hellos = document.getElementsByClassName("hello");
const title = document.querySelector(".hello h1");
#3.3 Events
JavaScript에서 대부분 작업할 일은, event를 listen 하는 것이다
ex. listen for a click
const title = document.querySeletor(".hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
// 2nd argument 함수에 괄호를 넣으면 함수가 바로 실행(play)된다JS에 어떤 event를 listen하고 싶은지 알려줘야 한다.
title을 클릭하는 것을 listen하고, 이 click event가 발생하면 handleTitleClick이라는 함수를 실행한다.
추가로, function이 바로 실행되지 않게 하는 것이 중요하다 // handleTitleClick();
함수를 JS에 넘겨주고, 유저가 title을 click할 경우에 JS가 실행버튼을 눌러준다.
#3.4 Events part Two
JavaScript로 HTML element를 가져오고, 가져온 element에 event listener을 추가해준다. event가 발생하면 특정 fucntion을 실행시킨다.
const title = document.querySeletor("div.hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
function handleTitleMouseEnter() {
title innerText = "Mouse is here!";
}
function handleTitleMouseLeave() {
title innerText = "Mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleTitleMouseEnter);
title.addEventListener("mouseleave", handleTitleMouseLeave);#3.5 More Events
const h1 = document.querySeletor("div.hello:first-child h1");
function handleTitleClick() {
h1.style.color = "blue";
}
function handleTitleMouseEnter() {
h1 innerText = "Mouse is here!";
}
function handleTitleMouseLeave() {
h1 innerText = "Mouse is gone!";
}
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
function hanldWindowOffline() {
alert("SOS no WIFI");
}
function hanldWindowOnline() {
alert("All GOOOD");
}
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleTitleMouseEnter);
h1.addEventListener("mouseleave", handleTitleMouseLeave);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
