조금씩 찝찝하게 지나온 몇가지 개념들에대해 복습해봐야겠다.

DOM (Document Object Model)

HTML을 조작할 수 있도록 마련된 객체 형태의 구조나 모델.
Javascript를 통해 객체의 속성에 접근하는 방식과 유사하게 HTML의 각각의 요소에 접근 할수 있게 해준다.

CRUD (Create Read Update Delete)

Document 객체를 통해 CRUD를 구현 할 수 있다.

• Create
  createElement를 이용하여 tag element를 만들 수 있다.

let newDiv = document.createElement('div');
console.log(newDiv);
// > <div></div>

• Read
  특정 tag에 접근할 수 있는 document속성 들이 있다.

document.querySelector(); // get 시리즈기능을 다실행할 수 잇다.
document.querySelectorAll(); // 동일 선택자를 가진 요소를 모두 선택할 수 있다. 접근은 배열형태로 가능하다.
document.getElementbyId();
documnet.getElementbyClass();
document.getElementbyTag();

• Update
  tag 내부의 내용 또는 값들을 수정할 수 있다.

document.textContent =''  // 주로 사용, 보안에 강함.
document.innerText 
document.innerHTML  // 보안에 좀더 취약함.

• Delete
  tag를 제거할 수 있다.

document.remove() // 해당 태그를 통채로 지워버린다.
document.removeChile() // 해당 태그의 자식을 선택적으로 제거할수 있다. firstChild, lastChild, children[0]
document.innerHTML = '' //remove() 유사하게 tag내의 내용을 제거할 수 있다.

append() vs appendChild()

두함수의 가장큰 차이점은 append()는 'strng'까지도 첨부가 가능하고 appendChild()는 선언된 매개변수와같은 요소만 가능하다!!

classList.add vs setAtribute() 비교!!

classList.add('class1')	 // 기존 class는 그대로 두고 class1을 추가!
setAtribute('class', 'class1 class2') //기존 class를 지우고 새로지정, 단 여러 class 를 지정 가능.

onclick vs addEventListener()

onclick같은 on이붙은 이벤트속성은 하나씩사용가능하며 오래된방식, addEventListener()는 여러게의 이벤트를 걸어놀수 있다.