[JS] DOM 조작

DOM 조작

새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것

innerHTML

setter와 getter 모두 존재하는 접근자 프로퍼티(속성),  HTML 마크업 수정 및 반환 가능

$divEle.innerHTML = 'Hello<span>Bye</span>';
// 이와 같이 사용하면 해당 태그 내의 text와 태그까지 변경가능

textContent

setter와 getter 모두 존재하는 접근자 프로퍼티(속성), 요소노드의 모든 텍스트(자손노드 포함)를 반환합니다. 단, HTML 마크업은 무시합니다.

$divEle.textContent

nodeValue

setter와 getter 모두 존재하는 접근자 프로퍼티(속성), 텍스트노드의 프로퍼티입니다. 즉, 텍스트노드 이외의 노드에서는 null를 반환합니다.

$TextEle.firstChild.nodeValue

노드생성과 추가

DOM은 노드를 직접 생성/삽입/삭제/치환하는 메소드를 제공,  반드시 문서노드를 통해 호출

1. createElement

요소노드 생성

document.createElement()

2. createTextNode

텍스트 노드 생성

document.createTextNode();

3. appendChild

생성된 노드를 자식 노드로 추가

(선택한 노드).appendChild();

노드 이동 및 특정 위치에 삽입

insertBefore(새로운노드, 위치)

(선택한노드).insertBefore(새로운노드, 위치)

노드 교체 및 노드 삭제

(선택한 노드).replaceChild(새로운 노드, 노드 위치) // 교체
(선택한 노드).removeChild(노드 위치) // 삭제

노드복사

(선택한 노드).cloneNode('deep 복사여부 [true || false]')

- false일 경우 자식노드까지는 복사되지 않음
- true일 경우 자손노드 전체 복사