Range객체
selection의 기본 컨셉은 Range 객체를 통해 구현된다. 기본적으로 시작과 끝에 대한 포인트를 지정하는 것으로 selection의 범위를 선택
<p id='p'>Example: <i>italic</i> and <b>bold</b></p>위의 코드는 아래 DOM 객체 구조를 가진다.
드래그한 부분을 Range 지정 예시
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p, 0);
range.setEnd(p, 2);
// range 객체에서 toString이 호출되면
// 태그 정보를 제외한 텍스트를 문자열로 반환한다
alert(range);
document.getSelection().addRange(range);
</script>createContextualFragment
var tagString = "<div>I am a div node</div>";
var range = document.createRange();
// 문서에서 첫 번째 div의 부모를 컨텍스트 노드로 만듭니다.
range.selectNode(document.getElementsByTagName("div").item(0));
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);