DOM

DOM은 Document Object Model 의 약자로 객체를 이용해 html 이나 xml 을 수정, 보완, 생성, 삭제 등 modify 할 수 있는 기능을 말한다.

//자바스크립트 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 의 힘이다.

DocumentFragment(이하 DF)

DF는 가상 돔이다(DOM, 먹는 돔아니...죄송합닏..) 그렇기에 성능을 최적화 할 수 있다.
예를 들어 id가 APP 인 노드에 list를 1000번 추가하려고 한다. 그럼 보통은 아래와 같이 코드를 짤것이다.

const app = document.getByElementId('app');
for(let i = 0 ; i < 1000 ; i++){
  const li = document.createElement('li')
  app.appendChild(li) 
}

그러나 이렇게 하면 DOM이 1000번 바뀌게 되어 성능이 저하된다 이때 DF를 사용하면 된다.

const app = document.getByElementId('app');
const df = document.createDocumentFragment()

for(let i = 0 ; i < 1000 ; i++){
  const li = document.createElement('li')
  df.appendChild(li) 
}

app.appendChild(df)

라고 하면 DOM은 한 번 만 변경된다. 왜냐면 DF는 말그대로 가상돔이기 때문에 DOM TREE에 표시되기 전에 포장지로써 존재했다가 표시되면 사라지기 때문.

EVENT

이벤트는 말그대로 어떤 변화가 발생 했을때, 무언가가 바뀌는 것을 의미한다.

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 함수 작동함.