DOM 조작

CRUD

• CREATE : createElement
• READ : querySelector, querySelectorAll
• UPDATE : textContent, id, classList, setAttribute
• DELETE : remove, removeChild
• append, prepend, appendChild

---

CREATE

새로운 Element를 생성하는 방법으로, 아래 코드를 입력하면 새로운 div element를 만들게 됩니다.

document.createElement('div') // element 생성
const newDiv = document.createElement('div') // element 생성후 변수에 할당

앞으로 이렇게 생성한 div element를 조작하는 방법에 대해서 알아보겠습니다.

---

READ

JavaScript에서 변수의 값을 읽기 위해서는 변수의 이름으로 읽을 수 있지만, DOM으로 HTML의 element 정보를 조회하기 위해서는 다른 방법을 사용해야 합니다. querySelector를 이용하면 되는데 첫번째 인자로 Selector를 전달하여 확인할 수 있습니다.

• 태그 : "div"
• id : "#id"
• class : ".class"

const Div = document.querySelector('div')
const Id = document.querySelector('#Id')
const Class = document.querySelector('.class')

각각의 변수를 console.log로 확인하면 HTML태그로 확인을 할 수 있습니다.
다만 querySelector를 사용할 경우 가장 첫번째 element만 선택하게 되는데 모든 element를 선택하고 싶다면 querySelectorAll를 사용하면 됩니다. 사용하는 방법은 똑같습니다.

---

UPDATE

CREATE에서 생성한 newDiv를 이용해 DOM을 조작하는 방법에 대해 알아보겠습니다.
새로 만든 element 외에도 기존에 생성한 element 또한 DOM 객체를 이용해 값을 수정할 수 있습니다.

textContent를 사용해서 비어있는 newDiv 엘리먼트에 문자를 입력할 수 있습니다.

newDiv.textContent = "두번째";

또, class를 수정하거나 추가할 수 있습니다.

• 추가
  newDiv.classList.add("클래스")
  newDiv.className += "클래스"

• 수정
  newDiv.className = "클래스"

• setAttribute 첫번째 인자에 속성 이름, 두번째 인자에 값을 넣어 다양한 속성을 넣을 수 있습니다.
  newDiv.setAttribute('class',"클래스")

APPEND

앞서 진행한 newDiv는 어디에도 연결되어 있지 않아 화면상에 나타나지 않습니다.
이를 연결하기 위해선, 여러 방법이 있는데 그 방법에 대해 알아보겠습니다.

• append 부모 노드에 자식 노드를 추가합니다.

  document.body.append(newDiv);
  // body element에 newDiv를 append 합니다.

• prepend append와 동일하지만 앞에 추가합니다.

• appendChild append와 비슷하지만, 약간의 차이점이 있습니다. append는 리턴 값을 반환하지 않지만 appendChild는 리턴 값을 반환하며, Node 객체만 다룰 수 있습니다.

DELETE

마지막으로 DELETE에 대해 알아보겠습니다.

먼저, 삭제하고자 하는 element를 선택하여 삭제하는 방법입니다. 앞에서 만들었던 newDiv를 삭제해보겠습니다.

newDiv.remove();

remove는 요소를 하나 삭제할 수 있습니다.
만약 모든 요소를 삭제하고 싶다면,

첫번째, querySelectorAll을 이용해 모든 element를 변수에 할당한 다음 반복문을 통해 모든 요소를 삭제할 수 있고,
두번째로 부모의 innerHTML요소를 초기화 하는 방법입니다. document.innerHTML = ""와 같은 방법으로 사용할 수 있지만,
innerHTML은 HTML의 요소를 직접적으로 건드릴 수 있게 되어 보안상 취약할 수 있습니다.

유사 배열에서 배열로 바꾸는 방법

const arr = Array.from(obj);
console.log(arr);

const arr2 = [...obj]
console.log(arr2);