DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다. DOM APIs 에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배워두면 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉬워 어떤 문제를 해결할 때도 유리할 것입니다. html을 문자열로 처리하면서 DOM에 쉽게 추가하는 방법을 정리했습니다.
DOM 조작하기 API
document. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_document.asp
element. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_all.asp
유용한 DOM Element 속성
1. tagName: 엘리먼트 태그명 반환
2. textContent : 노드의 텍스트 내용을 설정하거나 반환
3. nodeType: 노드의 노드 유형을 숫자로 반환
DOM 탐색 속성 정리
| 속성명 | 설명 |
| childNodes | 엘리먼트의 자식노드의 노드 리스트 반환(텍스트 노드 , 주석노드 포함) |
| firstChild | 엘리먼트의 첫번째 자식 노드 반환 |
| firstElementChild | 첫번째 자식 엘리먼트를 반환 |
| parentElement | 엘리먼트의 부모 엘리먼트 반환 |
| nextSibling | 동일한 노드 트리 레벨에서 다음 노드를 반환 |
| nextElementSibling | 동일한 노드 트리 레벨에서 다음 엘리먼트 반환 |
DOM 조작 메소드
| 메소드명 | 설명 |
| removeChild() | 엘리먼트의 자식 노드 제거 |
| appendChild() | 마지막 자식 노드로 자식 노드를 엘리먼트에 추가 |
| insertBefore() | 기존 자식노드 앞에 새 자식노드 추가 |
| cloneNode() | 노드를 복제 |
| replaceChild() | 엘리먼트의 자식 노드 바꿈 |
| closet() | 상위로 올라가면서 가장 가까운 엘리먼트를 반환 |
HTML을 문자열로 처리해주는 DOM 속성/메소드
| 속성명 혹은 메소드명 | 설명 |
| innerText | 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환 |
| innerHTML | 지정된 엘리먼트 내부 html을 설정하거나 반환 |
| insertAdjacentHTML() | HTML로 텍스트를 지정된 위치에 삽입 |