들어가기 전에

DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다.  DOM APIs에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배울 필요가 있습니다.

이제 부터 배울 다양한 DOM API는 라이브러리를 쓰는 것보다 대체로 더 빠릅니다.( 그 차이가 크진 않습니다)

물론 라이브러리보다 그 사용법이 불편하고 어려울 수는 있습니다. 하지만 low-level의 DOM API를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉽고 어떤 문제를 해결할때도 더 유리할 것입니다.

따라서 다양한 DOM APIs를 잘 배울필요는 분명합니다.

또한, html을 문자열로 처리하면서 DOM에 쉽게 추가하는 방법을 알아봅니다.

학습 목표

1. 다양한 DOM(Document Object Model) APIs를 이해합니다.
2. element와 text node를 생성해서 화면에 추가할 수 있습니다.

핵심개념

• DOM APIs
• 다양한 DOM 속성과 메서드들
• createElement, CreateTextNode, appendChild
• insertBefore, innerText, innerHTML, insertAdjacentHTML

학습하기

1. DOM 조작하기 API

documet. 으로 사용할 수 있는 APIs : 링크 바로가기

element. 으로 사용할 수 있는 APIs : 링크 바로가기

2. DOM 엘리먼트 오브젝트

몇 가지 유용 DOM 엘리먼트 속성

• tagName : 엘리먼트의 태그명 반환
• textContent : 노드의 텍스트 내용을 설정하거나 반환
  
• nodeType : 노드의 노드 유형을 숫자로 반환
  

DOM 탐색 속성

• childNodes
  • 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)
  • childNodes 예제
• firstChild
  • 엘리먼트의 첫 번째 자식 노드를 반환
  • firstChild 예제
• firstElementChild
  • 첫 번째 자식 엘리먼트를 반환
  • firstElementChild 예제
• parentElement
  • 엘리먼트의 부모 엘리먼트 반환 
  • parentElement 예제
• nextSibling
  • 동일한 노드 트리 레벨에서 다음 노드를 반환 
  • nextSibling 예제
    
• nextElementSibling
  • 동일한 노드 트리 레벨에서 다음 엘리먼트 반환
  • nextElementSibling 예제

DOM 조작 메소드

• removeChild()
  • 엘리먼트의 자식 노드 제거 
  • removeChild 예제
• appendChild()
  • 마지막 자식 노드로 자식 노드를 엘리먼트에 추가
  • appendChild 예제
• insertBefore()
  • 기존 자식노드 앞에 새 자식 노드를 추가
  • insertBefore 예제
• cloneNode()
  • 노드를 복제
  • cloneNode 예제
• replaceChild()
  • 엘리먼트의 자식 노드 바꿈
  • replaceChild 예제
• closest()
  • 상위로 올라가면서 가장 가까운 엘리먼트를 반환
  • closest 예제

HTML을 문자열로 처리해주는 DOM 속성 / 메소드

• innerText
  • 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환
  • innerText 예제
• innerHTML
  • 지정된 엘리먼트의 내부 html을 설정하거나 반환
  • innerHTML 예제
• insertAdjacentHTML()
  • HTML로 텍스트를 지정된 위치에 삽입
  • insertAdjacentHTML() 예제

생각해보기

1. DOM의 특정 영역을 insertAdjacentHTML메서드를 사용해서 추가해보세요.

참고 자료