1: Range 개체란 무엇입니까?
Range는 아래와 같이 사용자가 마우스로 선택한 영역을 드래그하는 것과 같이 HTML 문서의 영역을 나타냅니다.
Range 개체를 통해 사용자가 선택한 영역을 가져오거나, 선택한 영역을 지정하고, Range의 시작점과 끝점을 가져오고, 내부 텍스트를 수정하거나 복사하거나 HTML까지 가져올 수 있습니다. 이러한 기능은 서식 있는 텍스트 편집기 개발에 자주 사용됩니다.
둘: 현재 선택 가져오기
호환성 문제로 인해 IE 브라우저를 구분해야 합니다.
var selection, range;
if (window.getSelection) {
//现代浏览器
selection = window.getSelection();
} else if (document.selection) {
//IE
selection = document.selection.createRange();
}
//Range对象
range = selection.getRangeAt(0);
셋: 범위 속성
> collapsed 如果范围的开始点和结束点在文档的同一位置，则为 true，即范围是空的，或折叠的。 > commonAncestorContainer 范围的开始点和结束点的（即它们的祖先节点）、嵌套最深的 Document 节点。 > endContainer 包含范围的结束点的 Document 节点。 > endOffset endContainer 中的结束点位置。 > startContainer 包含范围的开始点的 Document 节点。 > startOffset startContainer中的开始点位置。
넷: 범위 연산
//选中区域的文字
var text = range.toString();
//选中区域的Element元素
var elem = range.commonAncestorContainer;
if(elem.nodeType != 1){
elem = elem.parentNode;
}
//选中区域的html
var span = document.createElement('SPAN');
span.appendChild(range.cloneContents());
//选区是否为空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
if (range.startOffset === range.endOffset) {
isSelectionEmpty = true;
}
}