HTML 5-Rangeオブジェクト(1)
44365 ワード
1、Rangeオブジェクト
(1)selectNode、SelectNodeContents、deleteContentsメソッドsetStart、setEND、setStartBefore、setStartAfter、setEndBefore、setENDAfterメソッド(2)基本概念:1つのRangeオブジェクトがページ上の連続領域を表す.Rangeオブジェクトを使用すると、Webページ上の任意の領域を取得または変更できます.
(3)selectNodeContents(div):divのコンテンツを選択し、コンテンツの先頭と末尾を起点と終点とする領域.selectNode(div):divというノードを選択し、divラベルの開始ラベルを起点とし、終了ラベルを終点とします.
(4)setStartとsetEnd setStartはrangeオブジェクトのある点を起点とし、setEndはrangeオブジェクトのある点を終点とする.
(1)selectNode、SelectNodeContents、deleteContentsメソッドsetStart、setEND、setStartBefore、setStartAfter、setEndBefore、setENDAfterメソッド(2)基本概念:1つのRangeオブジェクトがページ上の連続領域を表す.Rangeオブジェクトを使用すると、Webページ上の任意の領域を取得または変更できます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range </title>
<script src="util.js"></script>
</head>
<body>
Selection Rage
<input type="button" value=" " onclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>
function rangeTest(){
var html;
showRangeDiv = document.getElementById("showRange");
selection = document.getSelection();
if(selection.rangeCount>0){
html = " >"+selection.rangeCount+"< <br/>";
for(var i=0;i<selection.rangeCount;i++){
var range = selection.getRangeAt(i);// ，
html+=" "+(i+1)+" ："+range+"<br/>";
}
showRangeDiv.innerHTML = html;
}
}
(3)selectNodeContents(div):divのコンテンツを選択し、コンテンツの先頭と末尾を起点と終点とする領域.selectNode(div):divというノードを選択し、divラベルの開始ラベルを起点とし、終了ラベルを終点とします.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range2</title>
<script src="util.js"></script>
</head>
<body>
<div id="div" style="background-color:#e0a0b0;width:300px;height:50px">
</div>
<button onclick="deleteRangeContent(true)"> </button>
<button onclick="deleteRangeContent(false)"> </button>
</body>
</html>
function deleteRangeContent(onlyContent) {
var div = document.getElementById("div");
var rangeObj = document.createRange();
if(onlyContent){
rangeObj.selectNodeContents(div);
rangeObj.deleteContents();
}else{
rangeObj.selectNode(div);
rangeObj.deleteContents();
}
}
(4)setStartとsetEnd setStartはrangeオブジェクトのある点を起点とし、setEndはrangeオブジェクトのある点を終点とする.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range3</title>
<script src="util.js"></script>
</head>
<body>
<div id="myDiv" style="color:red"> </div>
<button onclick="deleteChar()"> </button>
</body>
</html>
function deleteChar() {
var div = document.getElementById("myDiv");
var textNode = div.firstChild;
var rangeObj = document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}