<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Selection TEST</title>
<style type="text/css">
html body{
width: 100%;
height: 100%;
font-size: 13px;
background-color: #CCCCCC;
margin: 0;
padding: 0;
}
#wrap{
width: 100%;
height: 100%;
float: left;
}
#wrap #container{
position: relative;
width: 700px;
/*height: 100%;*/
margin: 0 auto;
}
#text-container{
position: relative;
width: 100%;
height: 100px;
text-align: center;
color: white;
background-color: black;
padding: 20px;
}
#btn_container{
position: relative;
width: 100%;
height: 30px;
margin-top: 10px;
float: left;
}
#btn_container button{
position: relative;
width: 120px;
height: 50px;
font-size: 11px;
}
#input_container{
position: relative;
width: 100%;
margin-top: 20px;
float: left;
}
#input_container label {
display: block;
}
#input_container input {
width: 100px;
height: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<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>
<div id="btn_container">
<button id="btn_test1">Selection TEST 1</button>
<button id="btn_test2">Selection TEST 2</button>
<button id="btn_test3">Selection TEST 3</button>
<button id="btn_test4">커서 이동</button>
<button id="btn_test5">컨텐츠 삭제</button>
</div>
<div id="input_container">
<label>selection.anchorNode</label><input type="text" id="anchorNode" />
<label>selection.focusNode</label><input type="text" id="focusNode" />
<label>selection.anchorOffset</label><input type="text" id="anchorOffset" />
<label>selection.focusOffset</label><input type="text" id="focusOffset" />
<label>selection.isCollapsed</label><input type="text" id="isCollapsed" />
<label>selection.rangeCount</label><input type="text" id="rangeCount" />
<label>selection.toString()</label><input type="text" id="toString" />
</div>
</div>
</div>
<script type="text/javascript">
// Selection container 엘리먼트
var container = document.querySelector("#text-container");
var anchorNodeElem = document.querySelector('#anchorNode');
var focusNodeElem = document.querySelector('#focusNode');
var anchorOffsetElem = document.querySelector('#anchorOffset');
var focusOffsetElem = document.querySelector('#focusOffset');
var isCollapsedElem = document.querySelector('#isCollapsed');
var rangeCountElem = document.querySelector('#rangeCount');
var toStringElem = document.querySelector('#toString');
// 버튼 엘리먼트
var btnElem1 = document.querySelector('#btn_test1');
var btnElem2 = document.querySelector('#btn_test2');
var btnElem3 = document.querySelector('#btn_test3');
var btnElem4 = document.querySelector('#btn_test4');
var btnElem5 = document.querySelector('#btn_test5');
btnElem1.addEventListener('click', function(e) {
// Selection object 를 생성한다.
var selection = window.getSelection();
// anchorNode 를 할당한다.
anchorNodeElem.value = selection.anchorNode ? selection.anchorNode.nodeValue : '';
// focusNode 를 할당한다.
focusNodeElem.value = selection.focusNode ? selection.focusNode.nodeValue : '';
// anchorOffset 을 할당한다.
anchorOffsetElem.value = selection.anchorOffset;
// focusOffset 을 할당한다.
focusOffsetElem.value = selection.focusOffset;
isCollapsedElem.value = selection.isCollapsed;
rangeCountElem.value = selection.rangeCount;
// Selection 범위의 모든 컨텐츠를 할당한다.
toStringElem.value = selection.toString();
});
btnElem2.addEventListener('click', function(e) {
// Selection object 를 생성한다.
var selection = window.getSelection();
// 선택된 Selection 범위의 range 를 초기화한다.
selection.removeAllRanges();
// container 의 모든 자식 노드들의 range object 를 생성 후, addRange 메서드를 통해 새로운 Selection 범위를 생성한다.
var childNodes = container.childNodes;
var length = childNodes.length;
for (var i = 0; i < length; i++){
var childNode = childNodes[i];
var range = document.createRange();
range.selectNode(childNode);
// Selection 범위에 생성된 range object 를 추가한다.
selection.addRange(range);
}
// anchorNode 를 할당한다.
anchorNodeElem.value = selection.anchorNode ? selection.anchorNode.nodeValue : '';
// focusNode 를 할당한다.
focusNodeElem.value = selection.focusNode ? selection.focusNode.nodeValue : '';
// anchorOffset 을 할당한다.
anchorOffsetElem.value = selection.anchorOffset;
// focusOffset 을 할당한다.
focusOffsetElem.value = selection.focusOffset;
isCollapsedElem.value = selection.isCollapsed;
rangeCountElem.value = selection.rangeCount;
// Selection 범위의 모든 컨텐츠를 할당한다.
toStringElem.value = selection.toString();
var helloNode = container.getElementsByTagName('span')[0];
var worldNode = container.getElementsByTagName('span')[1];
console.log(selection.containsNode(helloNode, true)); // false
console.log(selection.containsNode(worldNode, true)); // true
toStringElem.value = selection.toString();
});
btnElem3.addEventListener('click', function(e) {
// Selection object 를 생성한다.
var selection = window.getSelection();
// collapse 또는 extend 메서드로 새로운 Selection 범위를 생성한다.
selection.collapse(container, 1);
selection.extend(container, 3);
// anchorNode 를 할당한다.
anchorNodeElem.value = selection.anchorNode ? selection.anchorNode.nodeValue : '';
// focusNode 를 할당한다.
focusNodeElem.value = selection.focusNode ? selection.focusNode.nodeValue : '';
// anchorOffset 을 할당한다.
anchorOffsetElem.value = selection.anchorOffset;
// focusOffset 을 할당한다.
focusOffsetElem.value = selection.focusOffset;
isCollapsedElem.value = selection.isCollapsed;
rangeCountElem.value = selection.rangeCount;
// Selection 범위의 range object 를 가져온다.
console.log(selection.getRangeAt(0));
toStringElem.value = selection.toString();
});
btnElem4.addEventListener('click', function(e) {
// Selection object 를 생성한다.
var selection = window.getSelection();
// 이전 Selection 범위를 취소한 후, 전달된 parentNode 의 모든 자식 노드들을 Selection 한다.
selection.selectAllChildren(container);
// Selection 범위가 시작되는 지점으로 커서를 이동시킨다.
selection.collapseToStart();
// Selection 범위가 끝나는 지점으로 커서를 이동시킨다.
//selection.collapseToEnd();
// anchorNode 를 할당한다.
anchorNodeElem.value = selection.anchorNode ? selection.anchorNode.nodeValue : '';
// focusNode 를 할당한다.
focusNodeElem.value = selection.focusNode ? selection.focusNode.nodeValue : '';
// anchorOffset 을 할당한다.
anchorOffsetElem.value = selection.anchorOffset;
// focusOffset 을 할당한다.
focusOffsetElem.value = selection.focusOffset;
isCollapsedElem.value = selection.isCollapsed;
rangeCountElem.value = selection.rangeCount;
toStringElem.value = selection.toString();
});
btnElem5.addEventListener('click', function(e) {
// Selection object 를 생성한다.
var selection = window.getSelection();
// collapse 또는 extend 메서드로 새로운 Selection 범위를 생성한다.
selection.collapse(container, 2);
selection.extend(container, 4);
// Selection 범위의 모든 text 를 삭제한다.
selection.deleteFromDocument();
// anchorNode 를 할당한다.
anchorNodeElem.value = selection.anchorNode ? selection.anchorNode.nodeValue : '';
// focusNode 를 할당한다.
focusNodeElem.value = selection.focusNode ? selection.focusNode.nodeValue : '';
// anchorOffset 을 할당한다.
anchorOffsetElem.value = selection.anchorOffset;
// focusOffset 을 할당한다.
focusOffsetElem.value = selection.focusOffset;
isCollapsedElem.value = selection.isCollapsed;
rangeCountElem.value = selection.rangeCount;
toStringElem.value = selection.toString();
});
function clearWhiteSpaceNode(elem){
elem = elem || document;
var childs = elem.childNodes;
if (childs.length){
for (var i = 0; i < childs.length; i++) {
var child = childs[i];
// child.nodeValue 문자열안에 공백만 있는 경우
// 해당 textNode 를 삭제한다.
if ((
child.nodeType === HTMLElement.COMMENT_NODE ||
child.nodeType === HTMLElement.TEXT_NODE) && !/\S/g.test(child.nodeValue)) {
elem.removeChild(child);
--i;
}
else if (child.nodeType === HTMLElement.ELEMENT_NODE) {
arguments.callee(child);
}
}
}
else{
var n = next(elem);
if (n) arguments.callee(n);
}
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType !== HTMLElement.ELEMENT_NODE)
return elem;
}
}
window.onload = function() {
clearWhiteSpaceNode();
}
</script>
</body>
</html>