Selection

September 15, 2015

Selection

정의
- Selection 은 마우스 또는 키보드를 통해, 컨텐츠를 선택, 또는 선택된 영역을 제어 하기위한 모든 특성들을 제공한다.

특성

Properties

이와같은 HTML 코드가 있다고 가정하고, 아래 나열된 속성들을 살펴보기로한다.
```

<div id="text-container" contenteditable="true">
	<span style="height: 20px">HELLO</span>
	<span style="height: 20px;padding-left: 5px;">WORLD</span>
	<span style="height: 20px;padding-left: 5px;">TEST</span>
	<span style="height: 20px;padding-left: 5px;">!!!!</span>
</div>
```
- selection.anchorNode:
  
  선택된 범위가 시작되는 지점의 노드를 반환한다.
- selection.anchorOffset:
  
  anchorNode 범위내에 anchor(선택된 범위가 시작되는 지점) 이전의 문자열(HE(2개))의 갯수를 반환한다.
- selection.focusNode:
  
  선택된 범위가 끝나는 지점의 노드를 반환한다.
- selection.focusOffset:
  - focusNode 범위내에 focus(선택된 범위가 끝나는 지점)의 문자열(WORLD(5개)) 갯수를 반환한다.
- anchorOffset 과 focusOffset 이 좀 이해하기 힘들더라도(개인적일수도 있지만;;;) 그만큼 중요한 부분이니, 반드시 이해하고 넘어가길 바란다.
- selection.isCollapsed:
  - 선택된 범위가 시작되는 지점(anchorOffset)과, 끝나는 지점(focusOffset)이 동일한지 여부를 반환한다.
  - 만약 첫 번째 문자와 두 번째 문자 사이를 클릭(드래그가 아닌)한 경우, anchorOffset 과 focusOffset 은 각각 1을 반환하게 된다.
    - 선택이 시작된 지점 이전의 문자열(H) 갯수(anchorOffset): 1
    - 선택이 끝난 지점의 문자열(H) 갯수(focusOffset): 1
- selection.rangeCount:
  - 선택된 범위의 range 크기를 반환한다.
  - 페이지 로드 후 사용자가 문서를 클릭하지 않았을경우, rangeCount 는 0을, 클릭한 후에는 1을 반환하게 된다.
  - 사용자는 일반적으로 한번에 하나의 range 를 선택할 수 있다.
  - Gecko 브라우저에서는 Multiple range 를 선택할 수 있다.(Ctrl or Command 키를 통해)
Methods
- selection.getRangeAt(range index):
  - 선택된 하나의 range object 를 반환한다.
- selection.collapse(parentNode, offset):
  - anchorNode 를 전달된 offset 으로 지정한다.
- selection.extend(parentNode, offset):
  - focusNode 를 전달된 offset 으로 지정한다.
- anchorNode 와 focusNode 를 각각의 메서드를 통해 새로 지정하면, 새로운 선택 범위를 만들어낼수 있다.
```
selection.collapse(container, 0);
selection.extend(container, 0);

console.log(selection.anchorNode); // HELLO
console.log(selection.focusNode); // HELLO

selection.collapse(container, 1);
selection.extend(container, 3);

console.log(selection.anchorNode); // WORLD
console.log(selection.focusNode); // TEST

selection.collapse(container, 4);
selection.extend(container, 4);

console.log(selection.anchorNode); // !!!!
console.log(selection.focusNode); // !!!!
```
- selection.collapseToStart():
  - 선택된 범위가 시작되는 지점으로 커서를 이동시킨다.
- selection.collapseToEnd():
  - 선택된 범위가 끝나는 지점으로 커서를 이동시킨다.
- selection.selectAllChildren(parentNode):
  - 이전에 선택된 범위를 취소(삭제)한 후, 전달된 parentNode 의 모든 자식 노드들을 선택 한다.
- selection.addRange(range):
  - 새로운 range(선택 범위의 문서 조각) 를 추가한다.
```
var container = document.getElementById("text-container");

// container 의 모든 자식 노드들에 대한 range object 를 생성 후 addRange 메서드를 통해, 선택 범위에 추가시킨다.
for (var i = 1; i < container.childNodes.length; i++){

	var childNode = container.childNodes[i];
	var range = document.createRange();

	range.selectNode(childNode);

	// 새로운 range(선택 범위의 문서 조각) 를 추가한다.
	selection.addRange(range);
}
```
- selection.removeAllRanges():
  - 모든 range(선택된 범위의 문서 조각)를 삭제한다.
- selection.deleteFromDocument():
  - 선택된 범위의 모든 text 를 삭제한다.
- selection.toString():
  - 선택된 범위의 모든 컨텐츠를 반환한다.
- selection.containsNode(aNode, aPartlyContained):
  - 전달된 노드(aNode)가 선택된 범위안에 있는지 여부를 반환한다.
  위 그림에서와 같이 helloNode 는 선택된 범위에 포함되지 않기때문에, false 를 반환하게 되며, worldNode 는 그 반대인 true 를 반환하게 된다.
```
var container = document.getElementById("text-container");

// hello 문자열 노드
var helloNode = container.getElementsByTagName('span')[0];
// world 문자열 노드
var worldNode = container.getElementsByTagName('span')[1];

console.log(selection.containsNode(helloNode, true)); // false
console.log(selection.containsNode(worldNode, true)); // true
```

API 테스트

아래 코드는 Chrome 브라우저에서만 테스트되었습니다.(소스 참조시 반드시 다른 브라우저에서도 테스트 하시기 바랍니다)

Selection

관련 용어

특성

API 테스트