자바스크립트에서 range 사용법은 무엇인가요?

JavaScript의 range 객체는 HTML 문서 내의 영역을 의미하며, 사용법은 "var elem=range.commonAncestorContainer;if(elem.nodeType != 1){...}"와 같습니다.

이 기사의 운영 환경: Windows 7 시스템, javascript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트에서 범위의 사용법은 무엇인가요?

JS Range 개체 사용

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;
   }
}

추천 학습: js 기본 튜토리얼》

위 내용은 자바스크립트에서 range 사용법은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!