DOM, querySelector

---

DOM  

DOM (Document Object Model) : 이름에서 유추해보자면, HTML의 엘리먼트를 객체로 가져와서 사용 가능한 모델

DOM으로 HTML을 조작할 수 있다.

createElement - CREATE

querySelector, querySelectorAll - READ

textContent, id, classList, setAttribute - UPDATE

remove, removeChild, innerHTML = "" , textContent = "" - DELETE

appendChild - APPEND

innerHTML과 textContent의 차이
-> 가급적 textContent를 사용하는 것이 좋다. 성능과 보안에 강점이 있고, innerHTML은 보안에 취약하다.

DOM (createElement) 사용

1. createElement를 이용해 div 태그를 만들어 변수 koreanFood에 할당해준다.
   

   const koreanFood = document.createElement('.div')​

2. 이렇게 만들어진 koreanFood라는 div태그는 아직 어디에도 속하지 않고 떠있는 상태이기 때문에
   body 태그에 append를 이용해 넣어준다.
   

   document.body.append(koreanFood)​

 

간략한 DOM 사용 방법

1. 우선 querySelector 등 으로 내가 읽어올 태그를 선택한다.
   

   let band = document.querySelector('.band')​

2. koreanFood라는 변수에 textContent를 이용해  '한국 음식'이라는 텍스트를 넣어주고, 또 classList로 'koreanFood'라는
   클래스명을 넣어준다.  
   

   koreanFood.textContent = '한국 음식';
   koreanFood.classList.add('koreanFood')​

    

클릭 시 경고창을 띄우는 함수에서 document.querySelector.(선택자) 버튼을 클릭했을 때
발생되는 함수를 할당할 시에 함수의 실행값을 할당하면 안되고, 함수 그 자체 를 할당해야한다.

---