[JAVASCRIPT] DOM

TIL

자바스크립트 DOM

DOM은 document object model의 약자로 HTML요소를 object처럼 조착할 수 있는 모델입니다.
DOM은 나무의 뿌리처럼 아래로 자녀요소들을 파생시키고,
우리는 Javascript를 이용하여 DOM을 다루며 HTML을 동적으로 만들어 줄 수 있습니다.

DOM에서의 수많은 메서드들 중 CRUD 시스템을 다룰 때 핵심이 되는 녀석들을 아래에 정리해보겠습니다.

container 변수에 문서 객체를 넣는 법

let container = document.querySelector(#container)

해당 변수에 div tag를 추가하는 법

container.append("div")

.textContent 메서드를 이용해서 태그 안쪽 메시지를 조작할 수 있다.

.ClassList 메서드를 이용해서 class를 조작할 수 있다.

HTML
<div class="success-message hide">사용할 수 있는 아이디입니다</div>

JS
let elSucessMessage = document.querySelector('.success-message')
elSucessMessage.classList.remove('hide') // output : <div class="success-message">

elSucessMessage.classList.add('hide') // output : <div class="success-message hide">

id가 container이며 그 여러개의 자식 요소를 지울때는

document.querySelector('#container').innerHTML = '';

innerHtml을 사용하면 간편하지만, 보안에서 몇 가지 문제가 있다고 합니다.
이를 대신하여 우린 .removeChild 메서드를 반복문을 사용하여 씁니다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

제목에 해당하는 H2 "Tweet List"까지 삭제됩니다. 이를 방지하기위해
자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있습니다. 또는 자식 요소를 하나만 남기게 할 수도 있습니다.

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있습니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

class, ID 말고 다른 attribute 추가

---

TODO before Sunday

• 마크다운을 사용하여 위의 글을 정리한다.
• koans 문제를 복기한다. 매우 유용한 사용법들을 따로 정리하여 기록한다