Document Object Model

웹사이트를 구축하는 데 사용되는 Web API
돔은 문서를 노드와 객체로 나타낸다.
트리구조.

script는 등장과 함께 실행된다.

console.dir(document.body.children)

id 이름이 nav인 div를 포함해서 모든 자식 요소의 class 이름을 console.log로 확인하는 방법

const firstChild = document.body.children[0];
console.dir(firstChild);

firstChild.parentNode //부모노드가 없을 때 document node 반환
firstChild.parentElement //부모노드가 없는경우 null반환

node vs element

node: html기준으로 부모자식을 나눔
element: content까지 포함시켜 부모자식 나눔

DOM 사용법

1. div를 만든다.

const mkdiv = document.createElement('div')

2. append한다.

const container = document.querySelector('#container')
container.append(mkdiv);
//container의 마지막 자식요소로 추가됨

3. querrySelector로 조회한다.(하나만 가져옴)
   querySelectorAll 사용시 모든 해당요소를 가져와 배열로 사용 가능하다.

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

4. textContent로 내용을 입력해준다.

mkdiv.textContent = 'dev';
//<div>dev</div>

5. classList.add 클래스 추가

mkdiv.classList.add('tweet');
//<div class="tweet">dev</div>

6. remove(); 삭제하기

mkdiv.remove();
//반복문 사용해 컨테이너 안에 있는 요소들 전부 삭제
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}
//클래스이름 찾아서 삭제
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

요소

자식노드: children,
childNodes(텍스트 노드를 포함한 모든 자식 노드. 배열은 아니다. for of 사용),
firstChild, lastChild
previousSibling, nextSibling
후손노드: descendants

setAttribute(name, value); 속성 값 추가하기
getAttribute(); 속성의 현재 값 가져오기
removeAttribute(); 속성제거

mkdiv.setAttribute('class','turnRed');