In HTML5, a Range object represents a contiguous range on a page. With the Range object, you can get or modify any area on the page. Includes acquisition, modification, deletion, and substitution operations.
Core content:
1.cloneRange
2.cloneContents
3.extractContents
4.createContextual
5.createcontextual-fragment
6.insertNode
7.compareBoundaryPoints
8.collapse
9.detach
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<script>
var rangeobj=document.createrange ();
function Selectobj () {
var Div=document.getelementbyid ("Mydiv");
Rangeobj.selectnode (DIV);
}
function Unselect () {
Rangeobj.collapse (FALSE);
}
function Showrange () {
Alert (rangeobj.tostring ());
}
</script>
<body>
<div id= "mydiv" style= "color:aqua;background-color:black; width:100px; height:100px; " > Content Area </div>
<button onclick= "selectobj ()" > select content </button>
<button onclick= "unselect ()" > Cancel content </button>
<button onclick= "Showrange ()" > Display content </button>
</body>
The code can replicate the directly running.
The detach method of range, such as: Rangeobj.detach (), releases the Range object, and other events are not set up after the release, primarily to release the Range object to enhance the performance of the application.