[JavaScript] DOM Node 조작

DOM, 즉 HTML은 사용자의 요청에 의해서 동적으로 변경될 일이 많이 생길 수 있습니다.

요즘은 vue / react / angluar 3대장 라이브러리, 프레임워크 등으로 DOM을 조작할 수 있지만, 이런 라이브러리/프레임워크를 쓰기 전에 low-level의 DOM API를 이해하면 더 라이브러리나 프레임워크 활용이나 습득이 더 빠르지 않을까 싶습니다.

 

핵심) 

• DOM APIs
• DOM 속성과 메서드들
• createElement(), CreateTextNode(), appendChild()
• insertBefore, innerText, innerHTML, insertAjacentHTML

DOM Element속성

• tagName : element의 태그명 반환
• textContent : Node의 텍스트 내용을 설정하거나 반환
• nodeType : Node의 유형을 숫자로 반환

DOM 탐색하는 속성

• childNodes :  엘리먼트의 자식 노드의 리스트를 반환. 
• firstChild : Element의 첫 번째 자식 노드 반환 
• firstElementChild : 첫 번째 자식 Element 반환
• parentElement : Element의 부모 Element 반환
• nextSibling : 동일한 노드 트리 레벨에서 다음 노드를 반환 
• nextElementSibling : 동일한 노드 트리 레벨에서 다음 Element 반환

DOM 조작하는 메서드

• removeChild() : 해당 Element의 자식 Node 제거
• appendChild() : 해당 Element에 마지막 Node(자식 Node) 추가
• insertBefore()  : 기존 자식 Node 앞에 새로운 자식 Node를 추가
• cloneNode() : 말 그대로  Node를 복제
• replaceChild() : Element의 자식 Node를 교체
• closet() : 상위로 올라가면서 가장 가까운 Element 반환

HTML을 문자열로 처리하는 DOM속성, DOM메서드

 

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

[ edwith - 웹프로그래밍 부스트코스 ] 를 개인적으로 공부하고 정리한 공간입니다. 잘못된 부분은 피드백 주시면 감사하겠습니다