6월1일(화) DOM으로 HTML 조작하기 (CRUD)

만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE)

- document.createElement('div') // div element를 만든다.

const tweetDiv/변수/ = document.createElement() // 변수선언으로 변수를 트리 구조와 연결

document.body.append(tweetDiv/변수/) // append 메소드를 이용하여 변수를 body에 넣는다.
text.Content 메소드를 사용하여 문자열을 입력

append, prepend 차이
appendChild, append 차이

querySelector // 셀렉터를 조회한다

const one.Tweet/변수/ = document.querySelector('.인자') // 클레스이름이 인자인 엘리면트 조회, 클레스를 찾는 것으로 인자앞에 . 가 있다.

const tweets/변수/ = document.querySelectorAll('.tweet') // 엘리면트가 여러개일 경우 한번에 가져올 수 있다.

• HTML 엘리먼트들은 배열처름 for문을 사용할 수 있다. 하지만 HTML엘리먼트들은 배열이아니다.
  유사배열, 배열형 객체 (Array-like Object)

const getOneTweet = document.getElementById('container') // 옛날 방식
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
container의 맨 마지막 자식 엘리먼트로 tweetDiv를 추가

textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력
oneDiv.textContent = 'dev';

console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev'; // div 엘리먼트에 문자열을 입력
console.log(oneDiv) // <div>dev</div>

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>//CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가

const container = document.querySelector('#container')
container.append(oneDiv) // append를 이용해 container의 자식 요소로 추가

DELETE - remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

document.querySelector('#container').innerHTML = ''; // 여러 개의 자식 엘리먼트를 지울때 사용

removeChild // 자식엘리먼트를 지정해서 삭제하는 메소드, 반복문(while, for, etc.)을 활용할 수 있다.

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

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

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

// 복습 필요 !