XML DOM - Range 객체

Range 객체는 문서 내의 연속적인 범위를 나타냅니다.

Range 객체

Range 객체는 문서의 연속적인 범위 영역을 나타내며, 이는 사용자가 브라우저 창에서 마우스로 드래그하여 선택한 영역과 일치합니다.

Range 모듈을 지원하는 구현이 있다면 Document 객체는 다음과 같이 정의되었습니다 createRange() 메서드를 호출하여 새로운 Range 객체를 생성할 수 있습니다.

주의:IE는 불일치하는 Document.createRange() 메서드를 정의했으며, 이 메서드가 반환하는 객체는 Range 인터페이스와 유사하지만 불일치합니다.

Range 인터페이스는 문서에서 선택된 영역을 정의하는 많은 메서드를 제공하며, 선택된 영역에서 잘라내기 및 붙이기와 같은 작업을 수행할 수 있는 몇 가지 메서드도 있습니다.

Range 인터페이스의 속성은 범위의 경계 노드와 오프셋을 얻는 방법을 제공합니다. 그 메서드는 범위 경계를 설정하는 방법을 제공합니다. 주의하시오, 범위의 경계는 다음과 같이 설정될 수 있습니다. Document 또는 DocumentFragment 객체의 노드. 범위의 경계점이 정의되면, deleteContents(), extractContents(), cloneContents(), insertNode() 메서드를 사용하여 잘라내기, 복사 및 붙이기 작업을 수행할 수 있습니다.

문서를 삽입하거나 제거하는 작업을 통해 문서 일부를 나타내는 모든 Range 객체가 변경됩니다(필요한 경우), 그들의 경계점이 유효하게 유지되고, 그들이(가능한 한) 동일한 문서 내용을 나타내도록 합니다.

용어: 범위, 경계점 및 오프셋

한 범위는 두 경계점을 가지며, 즉 시작점과 종료점입니다. 각 경계점은 노드와 그 노드의 오프셋으로 지정됩니다. 이 노드는 보통 Element 노드、Document 노드또는 Text 노드Element 노드와 Document 노드에 대해서는, 이 노드의 자식 노드를 가리킵니다. 0인 오프셋은 경계점이 이 노드의 첫 번째 자식 노드 앞에 위치한다는 것을 의미합니다. 1인 오프셋은 이 노드의 첫 번째 자식 노드 뒤에 경계점이 있고 두 번째 자식 노드 앞에 위치한다는 것을 의미합니다. 하지만 경계 노드가 Text 노드라면, 오프셋은 텍스트 중 두 문자 사이의 위치를 의미합니다.

Range 객체의 상수

이 상수들은 Range 객체의 경계 포인트를 어떻게 비교할지 지정합니다.

이들은 compareBoundaryPoints() 메서드의 how 파라미터의 유효한 값:

상수 설명
START_TO_START 지정된 범위의 시작 포인트와 현재 범위의 시작 포인트를 비교합니다.
START_TO_END 지정된 범위의 시작 포인트와 현재 범위의 종료 포인트를 비교합니다.
END_TO_END 지정된 범위의 종료 포인트와 현재 범위의 종료 포인트를 비교합니다.
END_TO_START 지정된 범위의 종료 포인트와 현재 범위의 시작 포인트를 비교합니다.

Range 객체의 속성

주의:모든 속성은 읽기 전용이며, 범위의 시작 포인트와 종료 포인트를 변경하기 위해 이러한 속성을 설정할 수 없습니다. 이를 위해 setEnd() 메서드와 setStart() 메서드를 호출해야 합니다.

주의:detach() 메서드 호출 후, 이러한 속성에 대한 모든 읽기 작업은 INVALID_STATE_ERR 코드를 반환하는 예외를 발생시킵니다. DOMException 예외.

속성 설명
collapsed 범위의 시작 포인트와 종료 포인트가 문서의 동일한 위치에 있으면 true입니다. 즉, 범위가 비어 있거나 접혀 있습니다.
commonAncestorContainer 범위의 시작 포인트와 종료 포인트(그들의 조상 노드)의 가장 깊이에 들어 있는 Document 노드
endContainer 범위의 종료 포인트를 포함하는 Document 노드
endOffset endContainer의 종료 포인트 위치
startContainer 범위의 시작 포인트를 포함하는 Document 노드
startOffset startContainer의 시작 포인트 위치

Range 객체의 메서드

주의:범위의 detach() 메서드를 호출한 후, Range 객체의 어떤 메서드 호출도 INVALID_STATE_ERR 코드를 반환하는 예외를 발생시킵니다. DOMException 예외.

메서드 설명
cloneContents() 해당 범위를 나타내는 문서 영역의 복제본을 포함하는 새로운 DocumentFragment 객체를 반환합니다.
cloneRange() 새로운 Range 객체를 생성하여 현재 Range 객체와 동일한 문서 영역을 나타냅니다.
collapse() 이 범위를 접어서 경계점을 겹치게 합니다.
compareBoundaryPoints() 지정된 범위의 경계점과 현재 범위의 경계점을 비교하여 -1, 0, 1을 반환합니다. 비교할 경계점은 첫 번째 매개변수에 의해 지정되며, 그 값은 이전에 정의된 상수 중 하나여야 합니다.
deleteContents() 현재 Range 객체가 나타내는 문서 영역을 제거합니다.
detach() 현재 범위가 더 이상 사용되지 않는다고 알립니다. 이 메서드를 호출하면, 범위의 다음 호출된 모든 메서드가 INVALID_STATE_ERR 코드를 반환하는 예외를 발생시킵니다. DOMException 예외.
extractContents() 현재 범위가 나타내는 문서 영역을 제거하고, 해당 영역의 내용을 DocumentFragment 객체로 반환합니다. 이 메서드와 cloneContents() 메서드, deleteContents() 메서드의 조합은 매우 유사합니다.
insertNode() 지정된 노드를 문서 범위의 시작점에 삽입합니다.
selectNode() 이 범위의 경계점을 설정하여 지정된 노드와 그 모든 자식 노드를 포함합니다.
selectNodeContents() 이 범위의 경계점을 설정하여 지정된 노드의 자식 노드를 포함하지만 지정된 노드 자체를 포함하지 않도록 합니다.
setEnd() 이 범위의 종료점을 지정된 노드와 오프셋으로 설정합니다.
setEndAfter() 이 범위의 종료점을 지정된 노드 뒤에 있는 바로 다음으로 설정합니다.
setEndBefore() 이 범위의 종료점을 지정된 노드 앞에 있는 바로 다음으로 설정합니다.
setStart() 이 범위의 시작점을 지정된 노드 내의 지정된 오프셋으로 설정합니다.
setStartAfter() 이 범위의 시작점을 지정된 노드 뒤에 있는 바로 다음으로 설정합니다.
setStartBefore() 이 범위의 시작점을 지정된 노드 앞에 있는 바로 다음으로 설정합니다.
surroundContents() 지정된 노드를 문서 범위의 시작점에 삽입한 후, 범위 내의 모든 노드의 부모 노드를 재정의하여 그들을 새로 삽입된 노드의 자식 노드로 만듭니다.
toString() 이 범위가 나타내는 문서 영역의 순수 텍스트 내용을 반환합니다.