Javascript: CRUD primary methods

🙋🏻‍♀️ CRUD란?

the four basic functions that are considered necessary to implement a persistent storage application. 다시 말해보면, 데이터 저장소에서 가능해야 할 최소한의 4가지 기능.

🍊 CREATE

let li = document.createElement('li'); // <li></li> 
let span = document.createElement('span'); // <span></span>
let p = document.createElement('p'); // <p></p>

🍐 READ

let ul = document.querySelector('ul');
let li = document.querySelectorAll('li'); 

querySelectorAll 에서 유의할 점은? 👉🏼 read more

🍎 UPDATE

span.textContent = "puppy"; 
span.classList.add('type'); // <span class="type">puppy</span>
p.setAttribute('class', 'description') // <p class="description"></p>

ul.appendChild(li); 
li.append(span, p);

여기서 .appendChild 와 .append의 차이점은? 👉🏼 read more

🥑 DELETE

// 자기 자신을 지울 때
li.remove(); 

// child element를 지울 때
// 1. 보안상의 취약점으로 권장하지 않는다. 
ul.innerHTML = ""; 

// 2. 모든 child elements를 지운다. 
while (ul.firstChild) {
  ul.removeChild(ul.firstChild);
}

// 3. first child elements 를 제외하고 지운다. 
while (ul.children.length > 1) {
  ul.removeChild(ul.lastChild);
}