DOM
DOM은 Document Object Model 의 약자로 객체를 이용해 html 이나 xml 을 수정, 보완, 생성, 삭제 등 modify 할 수 있는 기능을 말한다.
1
2
3
4
5
6
7
8
9
10
//자바스크립트 document 객체로 html 상의 정보를 변경할 수 있다.
console.log(document); // html 안에 있는 모든 라인을 뽑아냄.
const title = document.querySelector("#title"); // id = "title" 이라는 라인을 뽑아냄
console.log(title);
title.innerHTML = "Haloo, changed."; // id = "title" 이라는 라인안에 있는 내용을 변경함.
console.dir(title); // title id 의 기능을 보여줌.
title.style.color = "#9e63d9"; // 위코드의 결과로 나온 기능중에 하나 써보자. 글자 색깔 변경
console.dir(document);
document.title = "yoyoyo"; //이걸로 홈페이지 제목 변경가능
이제 title.~~~~라고 하면 index.html 파일안에 있는 id = title 의 영향을 받고 있는 This will work. so Don't worry 글자(이하 title 글자)를 modify 할 수 있게 된다. 이게 DOM 의 힘이다.
EVENT
이벤트는 말그대로 어떤 변화가 발생 했을때, 무언가가 바뀌는 것을 의미한다.
1
2
3
4
5
6
7
8
9
10
11
function handleResize() {
console.log("I have been resized yo");
}
window.addEventListener("resize", handleResize);
// eventlistener는 지금 resize(웹창의 크기 바뀜)이벤트를 기다리고 있으며 크기가 바뀔때 마다, handleresize 함수를 불러온다.
function changeColor() {
title.style.color = "blue";
}
window.addEventListener("click", changeColor); // title 글자를 클릭 했을때 changeCOlor 함수 작동함.