[DOM] CRUD!

Document Object Model

Create Read Update Delete

1. createElement - CREATE

2. querySelector, querySelectorAll - READ

• querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까?
• querySelector를 통해서 더 복잡한 작업을 할 수 있을까? idk
• querySelector의 부모는 꼭 document 객체여야만 할까? Nope!

3. textContent, id, classList, setAttribute - UPDATE

• textContent vs innerHTML
• innerHTML의 보안상 단점?
• setAttribute() : 속성값을 변경시키는 메소드

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

• element vs node : node는 element의 상위개념
• children vs childNodes
• removeChild vs remove
• why array method is not working on nodelist? (forEach는 되는데 reduce는 안 되는 이유?)
• how to convert nodelist into javascript array (유사배열 -> 배열)

---

append

• append() : 선택된 요소 내부의 끝에 추가됨

• prepend() : 선택된 요소 내부의 처음에 추가됨

• appendChild() :

• before() : 선택된 요소 전에 추가됨

• after() : 선택된 요소 뒤에 추가됨

• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할지 고민해 보자
  https://indepth.dev/posts/1161/here-is-why-appendchild-moves-a-dom-node-between-parents

---

// 1. div 상자를 만든다.
const tweetDiv = document.createElement('div');

// 2. div를 body에 연결해 준다 (showed on Element of Chrome inspect)
document.body.append(tweetDiv);

// 3. #container을 변수로 지정해줘서 불러오기 편하도록 한다
const container = document.querySelector('#container');

// 4. #container안으로 tweetDiv를 연결한다.
container.append(tweetDiv);

// 5. tweetDiv라는 상자에 컨텐츠를 넣어준다. -> 빈 컨텐츠 상자(oneDiv)를 만들어준다
const oneDiv = document.createElement('div');

// 6. 만든 빈 컨텐츠 상자(oneDiv)에 컨텐츠를 넣어준다.
oneDiv.textContent = 'Hello World!';

// 7. oneDiv에 class명을 붙여서, 같은 class명을 갖고 있는 요소들과 같은 스타일로 나타낸다.
oneDiv.classList.add('tweet')

// 8. 빈 상자였던 oneDiv에 컨텐츠와 스타일이 적용되었다. 이제 #container로 연결해       준다.
container.append(oneDiv);