브라우저 표준 DOM Range API(document.createRange())에 대한 빠른 참조 가이드입니다.
🔗 관련 문서: DOM Selection API 치트시트
Range 생성 (Creating a Range)
const range = document.createRange();
경계 설정 (Setting Boundaries)
// 컨테이너 노드와 오프셋으로 시작점 및 종료점 지정
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// 인접 노드를 기준으로 경계 설정
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// 노드 전체 또는 내부 콘텐츠 전체를 빠르게 선택
range.selectNode(node); // 노드 자체를 포함하여 선택
range.selectNodeContents(node); // 노드 내부의 모든 자식 노드만 선택
경계 축소 (Collapsing Boundaries)
range.collapse(true); // 시작점으로 축소 (캐럿을 앞쪽에 배치)
range.collapse(false); // 끝점으로 축소 (캐럿을 뒤쪽에 배치)
console.log(range.collapsed); // 시작점과 끝점이 동일하면 true 반환
콘텐츠 조작 (Content Manipulation)
// 복사: DOM을 수정하지 않고 DocumentFragment 반환
const fragment = range.cloneContents();
// 잘라내기: DOM에서 선택 내용을 제거하고 DocumentFragment로 반환
const extracted = range.extractContents();
// 삭제: 선택된 영역의 콘텐츠를 DOM에서 완전히 삭제
range.deleteContents();
// 범위 시작 위치에 새 노드 삽입
range.insertNode(newNode);
// 선택 영역 콘텐츠를 특정 요소로 감싸기
range.surroundContents(document.createElement('mark'));
읽기 전용 속성 (Read-Only Properties)
range.startContainer: 범위가 시작되는 컨테이너 노드.range.startOffset: startContainer 내의 시작 오프셋 숫자.range.endContainer: 범위가 끝나는 컨테이너 노드.range.endOffset: endContainer 내의 끝 오프셋 숫자.range.commonAncestorContainer: 시작 및 종료 컨테이너를 모두 포함하는 가장 깊은 공통 조상 노드.range.toString(): 범위 내의 텍스트 문자열.