Dom

Dom 기본

브라우저에서는 html 코드를 dom이라는 documentObjectModel 이라는 객체형태의 모델로 저장합니다
브라우저 html-> 파싱 -> token -> domTree생성(부모-자식 -상위-하위)

dom을 쉽게 탐색하고 조작하게 하기 위해서 브라우저에서 dom.api을 제공합니다.

대표적인 에) document.querySelector or getElementById

Dom node, 생성과 추가

1. Dom 주변 노드 탐색 ->
   자식 firstElemntChild
   형제 nextElementChild

이렇게 elemnt가 붙으 메소드들이
그냥 firstChild, nextChild 이런 메소드들은 공백 문자까지 인식을 해서 원하는 엘리먼트를 탐색하기 까다로워서 위에
element가 붙은 친구들을 주로 활용 :D
ie9+ safari 모두 지원 안해서 polyfill을 써야 합니다.

• nodeType의 이해
  nodeType에는 여러가지가 있다.
  1 element,3, text…. 11

• node 생성과 추가.

노드를 새롭게 만들고 DOM 트리에 추가하는 방법을 안다. 실무에서 많이 사용하는 방법이다. 꼭 실습한다.
DomAPi 사용법을 안다. tagName,textContent, nodeType, childNodes, firstChild, firstElementChild, parentElement, nextSibling, nextElementSibling

document.API
element.API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

document.addEventListener
document.getElmentById
dcoument.querySelector
document.createElement
등등등 
element.classList
elemnt.firstElementChild
element.innerHTML
element.isertAdjacentBefroe 등
element.remove()

3.DOM 조작 API

removeChild()
appendChild()
insertBefore()
cloneNode()
replaceChild()

게발자 도구에서 선택한 것은 $0으로 바로 접근 가능 !

DOM 문자열 조작

1
2
3
4
5
6

부모.insertBefore(넣을 위치 ,형제)

문자열로 처리
getter, setter innerHTML 둘다 역할을 다 가능 !!!
getter, setter innerText 둘다 역할을 다 가능 !!!
 insertAdjacentBefore 하위 혹은 같은 레벨 형제노드로 선택을 해서 넣을 수 있다. !총 4가지로