DOM Node

DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있다. DOM APIs에서는 다양한 메서드와 속성을 지원하고 있다. 

 

1. DOM 조작하기 API

 

document. 으로 사용할 수 있는 APIs

https://www.w3schools.com/jsref/dom_obj_document.asp

HTML DOM Document Object

 

element. 으로 사용할 수 있는 APIs

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Object

 

 

2. DOM 엘리먼트 오브젝트

- tagName : 엘리먼트의 태그명 반환

- textContent : 노드의 텍스트 내용을 설정하거나 반환

- nodeType : 노드의 노드 유형을 숫자로 반환

 

DOM 탐색 속성

- childNodes : 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)

- firstChild : 엘리먼트의 첫 번째 자식 노드를 반환 (공백이나 텍스트 노드도 첫 번째 자식으로 인정)

- firstElementChild : 첫 번째 자식 엘리먼트를 반환 (엘리먼트 노드만 찾음)

- parentElement : 엘리먼트의 부모 엘리먼트 반환

- nextSibling : 동일한 노드 트리 레벨에서 다음 노드를 반환

- nextElementSibling : 동일한 노드 트리 레벨에서 다음 엘리먼트 반환

 

DOM 조작 메소드

- removeChild() : 엘리먼트의 자식 노드 제거

- appendChild() : 마지막 자식 노드로 자식 노드를 엘리먼트에 추가

- insertBefore() : 기존 자식노드 앞에 새 자식 노드를 추가

- cloneNode() : 노드를 복제

- replaceChild() : 엘리먼트의 자식 노드 바꿈

- closest() : 상위로 올라가면서 가장 가까운 엘리먼트를 반환

 

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

- innerText  //getter, setter!  : 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환

- innerHTML  //getter, setter!   : 지정된 엘리먼트의 내부 html을 설정하거나 반환

- insertAdjacentHTML() : HTML로 텍스트를 지정된 위치에 삽입

 

 

 

 

 

 

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/254329?isDesc=false

웹 프로그래밍(풀스택)

 

 

https://en.wikipedia.org/wiki/Document_Object_Model

Document Object Model - Wikipedia