CRUD

• Create
• Append (DOM에는 HTML에 적용하는 메소드가 추가로 있다.)
• Read
• Update
• Delete

---

CREATE

: DOM을 JavaScript로 조작하여 HTML Element를 만드는 것

createElement()

document.createElement(tagName) : HTML 요소를 만드는 document 객체의 메소드

document.createElement('div'); 
// div 요소를 만든다.
const div1 = document.createElement('div'); 
// 변수 div1에 div 요소를 만들어 할당한다.

• 이렇게 만든 엘리먼트는 Append를 이용해 다른 엘리먼트 안에 자식 요소로 넣어줘야 웹 페이지 상에서 확인할 수 있다.

---

APPEND

: 생성한 HTML 요소를 부모 노드에 자식 요소로 포함시키는 것

append()

Element.append(Node) : HTML 요소를 특정 엘리먼트에 마지막 자식 요소로 넣는 메소드

document.body.append(div1); 
// body 요소에 변수 div1(div 요소)를 마지막 자식 요소로 넣는다.

prepend()

Element.prepend(Node) : HTML 요소를 특정 엘리먼트에 첫 번째 자식 요소로 넣는 메소드

document.body.prepend(div1); 
// body 요소에 변수 div1(div 요소)를 첫 번째 자식 요소로 넣는다.

---

READ

: DOM을 JavaScript로 조작하여 HTML Element를 조회하는 것

querySelector(), querySelectorAll()

document.querySelector(selectors) : 선택자와 일치하는 문서 내 첫 번째 요소를 반환하는 메소드

const tweet = document.querySelector('#tweet'); 
// id가 tweet인 HTML 요소를 조회한다.

document.querySelectorAll(selectors) : 선택자를 만족하는 모든 요소의 목록을 NodeList 객체로 반환하는 메소드

const tweets = document.querySelectorAll('.tweet'); 
// 클래스가 tweet인 모든 HTML 요소를 NodeList 객체로 받아온다.

NodeList 객체

배열은 아니지만 for, for...of, forEach()를 사용하여 순회할 수 있다.
또한 Array.from()을 사용하여 배열로 변환 할 수 있다.

---

UPDATE

: DOM을 JavaScript로 조작하여 HTML Element를 변경하는 것

textContent

Node.textContent : HTML 요소에 텍스트 콘텐츠를 입력하는 메소드

div1.textContent = '아무 말';
console.log(div1); // <div>아무 말</div>

classList

Element.classList.add('className') : HTML 요소에 class를 추가하는 메소드

• 만약 추가하려는 class가 이미 존재한다면 무시한다.

div1.classList.add('red');
console.log(div1); // <div class = "red"></div>

Element.classList.remove('className') : HTML 요소의 class를 삭제하는 메소드

div1.classList.remove('red');

Element.classList.contains('className') : 지정한 class가 존재하면 true, 없으면 false를 반환하는 메소드

div1.classList.contains('red'); // true
div1.classList.contains('blue'); // false

Element.classList.replace('old', 'new') : 존재하는 클래스를 새로운 클래스로 교체하는 메소드

div1.classList.replace('red', 'blue') // true
console.log(div1); // <div class = "blue"></div>

Element.classList MDN

setAttribute()

Element.setAttribute(name, value) : HTML 요소에 속성을 추가하는 메소드

const link1 = document.createElement('a');
link1.setAtrribute('href', 'https://velog.io/@wlwl99');
// link1에 속성 'href'를 추가하고, 속성값 'https://~'을 할당한다.
console.log(link1); 
// <a href = "https://velog.io/@wlwl99"></a>

• HTML 요소에 id를 추가할 수도 있다.

div1.setAttribute('id', 'bold');
console.log(div1); // <div id = "bold"></div>

---

DELETE

: DOM을 JavaScript로 조작하여 HTML Element를 삭제하는 것

remove()

Element.remove() : HTML 요소를 삭제하는 메소드

div1.remove(); // div1을 DOM에서 삭제한다.

innerHTML

Element.innerHTML : 요소 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정하는 메소드

• innerHTML을 이용해 모든 자식 요소를 삭제할 수 있다.

document.querySelector('#container').innerHTML = '';
// id가 container인 요소 내의 모든 요소를 지운다.

• 하지만 innerHTML은 보안에서 XSS 공격에 취약하다는 문제점을 가지고 있다.

XSS(Cross-Site Scripting)

: 악의적인 목적을 가진 이가 웹사이트에 악성 스크립트를 주입하는 행위

removeChild()

Node.removeChild(child) : 자식 요소를 제거하고 제거된 요소를 반환하는 메소드

• 반복문(while, for, for...of forEach 등)과 함께 사용하여 원하는 자식 요소를 삭제할 수 있다.

모든 자식 요소를 삭제

const container = document.querySelector('#container');
while(container.firstChild) {
	container.removeChild(container.firstChild)
} // container에 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 삭제한다.

첫 번째 자식 요소만 남기고 모든 자식 요소를 삭제

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
} // container의 자식 요소가 1개가 넘는다면, 마지막 자식 요소를 삭제한다.

지정한 클래스명을 가진 요소만 찾아서 삭제

// forEach() 메소드 사용
const tweets = document.querySelectorAll('.tweet') // 클래스가 tweet인 모든 요소 선택
  tweets.forEach(function(tweet) { // 배열을 순회하며 요소를 삭제한다.
  tweet.remove();
})

// for...of 사용
for (let tweet of tweets){ // 배열을 순회하며 요소를 삭제한다.
    tweet.remove();
}

❔ 학습 후 궁금한 점

• innerHTML이 어떻게 XSS에 취약한지?
• removeChild()의 사용법