range object:
is a fragment (HTML fragment), which contains a node or part of a text node. Under normal circumstances, there may be only one range on the page at the same time, or there may be multiple ranges (use the Ctrl key for multiple selections, but some browsers do not allow it, such as Chrome).
You can get the range object from the selection, or you can use the document.createRange() method to get it
1.getSelection(): Get the selected information on the page;
2.rangeCount: The number of intervals, how many contents are selected ;
3.selection.rangeCount;
4.selection.getRangeAt(i);
##5.createRange() method creates a range object;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range对象</title>
</head>
<body>
selection对象和range对象
<input type="button" value="点击" onclick="use()">
<div id="rangeDiv"></div>
<script>
function use() {
var html;
rangeDiv=document.getElementById("rangeDiv");
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/>";
}
rangeDiv.innerHTML=html;
}
}
</script>
</body>
</html>More API ranges For object-related articles, please pay attention to the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
