DOM 조작하기 API
DOM 엘리먼트 오브젝트
몇가지 유용한 DOM 엘리먼트 속성
- tagName : 엘리먼트의 태그명 반환
- textContent : 노드의 텍스트 내용을 설정하거나 반환
- nodeType : 노드의 노드 유형을 숫자로 반환
DOM 탐색 속성
- childNodes : 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)
- firstChild : 엘리먼트의 첫 번째 자식 노드를 반환 (공백 포함)
- firstElementChild : 첫 번째 자식 엘리먼트를 반환
- parentElement : 엘리먼트의 부모 엘리먼트 반환
- nextSibling : 동일한 노드 트리 레벨에서 다음 노드를 반환 (공백 포함)
- nextElementSibling : 동일한 노드 트리 레벨에서 다음 엘리먼트 반환
DOM 조작 메소드
- removeChild() : 엘리먼트의 자식 노드 제거
- appendChild() : 마지막 자식 노드로 자식 노드를 엘리먼트에 추가
- InsertBefore() : 기존 자식노드 앞에 새 자식 노드를 추가
- cloneNodes() : 노드를 복제
- replaceChild() : 엘리먼트의 자식 노드 바꿈
- closest() : 상위로 올라가면서 가장 가까운 엘리먼트를 반환
HTML을 문자열로 처리해주는 DOM 속성/메소드
- innerText : 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환
- innerHTML : 지정된 엘리먼트의 내부 html을 설정하거나 반환
- insertAdjacentHTML() : HTML로 텍스트를 지정된 위치에 삽입
do for me