W3] Range 선택 영역 옮기기

W3 의 Range 는 문서의 텍스트 선택영역 처럼 나타내는것을 의미 합니다
DOM 은 노드 구조로 되어있어서 다른 선택영역 처리방법이 필요 했던것이죠
setStart, setEnd 도 있지만 사용 편의상으로 대체 메서드를 사용하는것이 좋습니다

문서

W3
https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

MDN
https://developer.mozilla.org/en-US/docs/Web/API/Range

요약

테스트할때 아래 HTML 을 사용합니다
<div class="text" contentEditable="true">11<span>2222</span>11</div> 


setStartBefore, setEndBefore
[커서]11111111
[커서]<span>1111</span>

setStartAfter, setEndAfter
11111111[커서]
<span>1111</span>[커서]

시작지점의 앞, 끝지점의 뒤 - 선택 합니다

Element 가 span 인경우
Range.setStartBefore( Element.firstChild )
Range.setEndAfter( Element.lastChild )

진하게 표시한 부분을 선택합니다
<div class="text" contentEditable="true">11<span>2222</span>11</div>

시작지점의 뒤, 끝지점의 앞 - 선택 합니다

Element 가 span 인경우
Range.setStartBefore( Element )
Range.setEndAfter( Element )

진하게 표시한 부분을 선택합니다
<div class="text" contentEditable="true">11<span>2222</span>11</div>

버그

위지웤상으로 고치면 오작동을 일으킵니다
태그 경계의 포커스가 지정된 Range 랑 다를 수 있으므로 Range 프로퍼티를 보거나 아래 메서드로 정확하게 확인
Range.deleteContents()
Range.insertNode()