[DOM 다루기]

document.createElement('div')

//div 요소 생성

const tweetDiv = document.createElement('div')
//tweetDiv에 div 요소 넣기

document.body.append(tweetDiv)
//바디에 tweetDiv를 추가

const oneTweet = document.querySelector('.tweet')

const tweets = document.querySelectorAll('.tweet')
//이렇게 가져온 요소들은 '배열이 아닌 유사배열'
정식 명칭은 Array-like-Object

getElementById와 quertSelector은 같은 의미이고,
이전 브라우저 호환성 떄문에 전자를 사용해야 할수도 있다.

container.append(tweetDiv)
//컨테이너에 tweewDiv를 추가

extContent를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력
ex) oneDiv.textContent

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

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

oneDiv.remove()
//remove를 활용해 삭제하기

document.querySelector('#container').innerHTML = '';
//컨테이너의 모든 자식 요소를 지우기
+주의사항:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations


따라서 아래와 같은 removeChild 사용을 권고
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()
}
//직접 클래스 이름을 찾아서 지우는 방법



ex)

let elInputUsername = document.querySelector('#username');
elInputUsername.value = '김코딩'
let elSuccessMessage = document.querySelector('.success-message hide');
let elFailureMessage = document.querySelector('.failure-message hide');
elFailureMessage.classList.remove('hide');
elInputUsername.onkeyup = function(){
  console.log(elInputUsername.value);
  if(isMoreThan4Length(elInputUsername.value)){
    console.log('4글보자보다 크네');
  }else{
    console.log('짧다');
  }
}
function isMoreThan4Length(value){
  return value.length >=4;
}