DOM

DOM API 란

• Document Object Model
• 브라우저는 웹 문서를 로드한 후 , 파싱하여 Dom을 생성한다.
• DOM은 모든 요소,속성,텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라
  트리구조로 구성한 것을 의미한다.
• 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며 이때 필요로 하는 것이 DOM API이다.

DOM Tree 구성요소

• 문서 노드(Document Node) - 최상위 트리이자 접근의 시작점이다.
• 요소 노드(Element Node) - HTML 요소를 표현한다.
• 속성 노드(Attribute Node) - HTML 요소의 속성을 표현한다.
• 텍스트 노드(Text Node) - HTML 요소의 텍스트를 표현한다. 자식을 가질 수 없다.

DOM API

(DOM을 통해 웹페이지를 조작하려면 다음 순서에 맞게 API를 사용한다. )

• 조작하고자하는 요소를 선택 또는 탐색한다.
• 선택된 요소의 콘텐츠 또는 어트리뷰트를 조작한다.

1.요소 선택 및 탐색

1-1 하나의 요소 노드 선택

• document.getElementById(id)
  1) id 값으로 요소 노드 한 개를 선택한다.
  2) 여러 개가 선택된 경우 첫번째 요소만 반환한다.
• document.querySelector(cssSelector)
  1) CSS 선택자로 요소 노드 한 개를 선택한다.
  2) 여러 개가 선택된 경우 첫 번째 요소만 반환한다.

1-2. 여러 개의 요소 노드 선택

• document.getElementsByClassName(class)
  1) class 값으로 요소 노드를 모두 선택한다.
  2) 공백을 사용하면 여러 개의 class를 지정할 수 있다.
  3) HTMLCollection 형태로 반환한다.
• document.getElementsByTagName(tagName)
  1) 태그 명으로 요소 노드를 모두 선택한다.
  2) HTMLCollection 형태로 반환한다.
• document.querySelectorAll(selector)
  1) CSS 선택자로 요소 노드를 모두 선택한다.
  2) NodeList 형태로 반환한다.

1-3. 탐색

• parentNode
  1) 부모 노드를 탐색한다.
• firstChild, lastChild
  1) 자식 노드를 탐색한다.
  2) 공백, 줄 바꿈도 텍스트 노드 취급당하므로 주의한다.
• childNodes
  1) 자식 노드의 컬렉션을 반환한다.
  2) NodeList 형태로 반환한다.
• children
  1) 자식 노드의 컬렉션을 반환한다.
  2) HTMLCollection 형태로 반환한다.

HTMLCollection 과 NodeList 비교 (MDN)

• HTMLCollection (live)
  1)유사 배열
  2) 실시간으로 노드의 상태 변경을 반영한다.
• NodeList (non-live)
  1) 유사 배열
  2) 경우에 따라 라이브 컬렉션이 되기도 한다.

2. 조작

2-1. 텍스트 노드에 접근 및 수정

• 텍스트 노드는 부모 노드를 거쳐 탐색되어야 한다.
• nodeValue
  1) 텍스트 노드는 문자열, 요소 노드는 null을 반환한다.
  2) 텍스트 노드의 유일한 프로퍼티이다.

2-2. 속성 노드에 접근 및 수정

• className
  1) class 값을 얻거나 변경한다.
  2) class 값이 여러개인 경우 공백으로 구분된 문자열이 반환된다.
  3) 값을 할당할 때 class 속성이 존재하지 않으면 class 속성을 생성한 후 값을 할당한다.
• id
  1) id 값을 얻거나 변경한다.
  2) 값을 할당할 때 id 속성이 존재하지 않으면 id 속성을 생성한 후 값을 할당한다.

2-3. HTML 콘텐츠 조작

• textContent
  1) 요소의 텍스트 콘텐츠를 얻거나 변경한다. 마크업은 무시된다.
  2) 값 변경시 마크업을 포함시키면 문자열로 인식되어 그대로 출력된다.
• innerText
  1) 마크업을 제외한 문자열을 리턴한다.
  2) 값을 변경할 땐 마크업을 그대로 추가해야 한다.
  3) 마크업을 포함해 값을 추가하는 것은 XSS에 취약하다.
  4) 아래의 이유로 사용하지 않는 것이 좋다.
  4-1) 비표준이다.
  4-2) CSS에 순종적이다.
  4-3) CSS를 고려해야 하므로 textContent 보다 느리다.
• innerHTML
  1) 자식요소를 하나의 문자열로 얻는다.
  2) 마크업을 포함하여 리턴한다.
  3) 마크업을 포함해 값을 추가하는 것은 XSS에 취약하다.

2-4. DOM 조작 방식

innerHTML을 사용하지 않고 새로운 콘텐츠를 추가하는 방법이다.

• createElement(tagName)
  1) 태그이름을 인자로 전달하여 요소를 생성한다.
• createTextNode(text)
  1) 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
• appendChild(Node)
  1) 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
• removeChild(Node)
  1) 인자로 전달한 노드를 DOM 트리에 제거한다.

innerHTML 과 DOM 조작 방식 비교

• innerHTML
  1) DOM 조작 방식에 비해 빠르고 간편하다.
  2) XSS공격에 취약해서 값을 추가할 때 주의해야 한다.
  3) 내용을 덮어쓰는 방식이라 비효율적이다.
• DOM 조작 방식
  1) 특정 노드 한 개를 추가할 때 적합하다.
  2) innerHTML보다 느리고 많은 코드가 필요하다