The Range object represents a contiguous area on the page, and through the Range object, you can get or modify any area on the page by creating an empty Range object as follows:
var range = Document.createrange ();
In HTML5, each browser window and each window has a Selection object that represents the area selected by the user's mouse in the page (note: A browser that has been tested IE9 below does not support selection objects), and you can create selection objects with the following statement ；
var selection = Document.getselection (); Or
var selection = Window.getselection ();
Each Selection object has one or more range objects, and each Range object represents a contiguous area within the range selected by the user's mouse, and in Firefox, multiple contiguous regions can be selected with the CTRL key. So in Firefox, a Selection object has multiple Range objects, and in other browsers, the user can only select a contiguous range, so there is only one Range object.
You can get a Range object for a Selection object by using the Getrangeat method of the Selection object, as follows:
var range = Document.getselection (). getrangeat (index);
The Getrangeat method has a parameter index, which represents the serial number of the Range object, and we can determine whether the user has selected the content by the value of the Rangecount parameter of the Selection object.
When the user does not press the mouse, the value of this parameter is 0.
When the user presses the mouse, the parameter value is 1.
When a user selects one or more regions while holding down the CTRL key while using the mouse, the parameter value represents the number of user-selected areas.
When the user cancels the selection of the range, the property value is 1, representing an empty Range object on the page;
Copy Code
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>range</title>
<body>
<script>
function Rangetest () {
var html;
var Showrangediv=document.getelementbyid ("Showrange");
var selection=document.getselection ();
if (selection.rangecount>0) {
Html= "You have selected" +selection.rangecount+ "> Segment Content <br/>"
for (Var i=0;i<selection.rangecount;i++) {
var range=selection.getrangeat (i);
html+= "+ (i+1) +" Paragraph content is: "+ range+" <br/> ";
}
showrangediv.innerhtml=html;
}
}
</script>
Selection and the use of Range objects
<input type= "button" value= "click Me" onclick= "Rangetest ()" >
<div id= "Showrange" ></div>
</body>
Copy Code
Selectnode method: The Selectnode method of the Range object is used to designate the start point of a Range object as the starting point of a node, specifying the end point of the Range object as the endpoint of that node, so that the region represented by the Range object contains the node. Here's how to use it:
Rangeobj.selectnode (node);
The rangeobj above represents a Range object that uses a parameter that represents a node in the page.
Selectnodecontents method: Used to designate the start point of a Range object as the starting point for all content in a node, specifying the end point of the Range object as the end point of all the contents of that node, so that the range represented by the Ranges object contains all the contents of that node. Here's how to use it:
Rangeobj.selectnodecontents (node);
The meaning is as shown above;
DeleteContents method: Used to remove content contained in a Range object from the page, using the following method:
Rangeobj.deletecontents ();
Copy Code
<script>
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 ();
}
}
</script>
<div id= "div" style= "background-color:aquamarine; width:300px;height:50px ">
Content in elements
</div>
<button onclick= "Deleterangecontent (False)" > delete element </button>
<button onclick= "Deleterangecontent (True)" > Delete content </button>
Copy Code
The Setstart method is used to designate a location in a node as the starting point for the range represented by the Range object, using the following method:
Rangeobj.setstart (Node,curindex);
As the above code Rangeobj represents a Range object, the Setstart method uses 2 parameters, the first parameter node represents a nodes, the second parameter is a number, and when the first parameter node represents a text node with a text content, The parameter value is used to specify the end position of the first text as the starting position of the area represented by the Range object, and when the first parameter, node, contains other child nodes, the value of the parameter is used to specify the end position of the number of child nodes as the starting position of the area represented by the Range object;
The SetEnd method is used to specify a location in a node where the Range object represents the end of the range. Use the following method:
Rangeobj.setend (Node,curindex);
The meaning of the 2 parameters in the method is the same as the parameters in the Setstart method, except that one is the starting position and the other is the end position;
Setstartbefore method: Used to designate the start position of a node as the starting point for the range represented by the Range object.
Setstartafter method: Used to specify the end position of a node as the starting point for the range represented by the Range object.
Setendbefore method: Used to designate the start position of a node as the end position of the area represented by the Range object.
Setendafter method: Used to specify the end position of a node as the end position of the area represented by the Range object.
Copy Code
<script>
function Deletechar () {
var Div=document.getelementbyid ("Mydiv");
var textnode=div.firstchild;
var rangeobj=document.createrange ();
Rangeobj.setstart (textnode,1);
Rangeobj.setend (textnode,5);
Rangeobj.deletecontents ();
}
</script>
<div id= "mydiv" style= "Color:cornflowerblue" >
12345 Test Delete text function aaaaaaaaa
</div>
<button onclick= "Deletechar ()" > Delete text </button>
Copy Code
Clonerange
The Clonerange method of the Clonerange method Range object is used to copy the current Range object, which returns the copied Range object.
Copy Code
<script>
function Clonerange () {
var rangeobj=document.createrange ();
var P=document.getelementbyid ("P");
Rangeobj.selectnodecontents (P)
var rangeclone=rangeobj.clonerange ();
Alert (rangeclone.tostring ());
}
</script>
<p id= "P" > here is the content </p>
<button onclick= "Clonerange ()" > Cloning </button>
Copy Code
Clonecontents
This method is used to append an HTML code to the page and to clone the HTML code in the area represented by the Range object into the appended HTML code;
Copy Code
<script>
function Clonecontent () {
var Div=document.getelementbyid ("Div1");
var rangeobj=document.createrange ();
Rangeobj.selectnodecontents (DIV);
var docfrangment=rangeobj.clonecontents ();
Div.appendchild (docfrangment);
}
</script>
<div id= "Div1" >
* Small Cute goods *
<br/>
<button onclick= "clonecontent ()" > Cloning </button>
<br/>
</div>
Copy Code
Extractcontents
The Extractcontents method is used to clone the HTML code in the area represented by the Range object into a DocumentFragment object, and then remove the HTML code from the page;
Copy Code
<script>
function Movecontent () {
var Srcdiv=document.getelementbyid ("Srcdiv");
var Disdiv=document.getelementbyid ("Disdiv");
var rangeobj=document.createrange ();
Rangeobj.selectnodecontents (SRCDIV);
var docfrangment=rangeobj.extractcontents ();
Disdiv.appendchild (docfrangment);
}
</script>
<div id= "Srcdiv" style= "background-color:cornflowerblue;width:300px;height:50px" > </div>
<div id= "Disdiv" style= "Background-color: #ff6471; width:300px;height:50px" ></div>
<button onclick= "movecontent ()" > Moving elements </button>
Copy Code
Insertnode
Insertnode method: This method is used to insert the specified node into the area represented by a Range object, where the insertion position is the starting point of the area represented by the Range object, and if the node already exists on the page, the node is moved to the beginning of the area represented by the Range object.
Copy Code
<script>
function Movebutton () {
var Btn=document.getelementbyid ("button");
var selection=document.getselection ();
if (selection.rangecount>0) {
var range=selection.getrangeat (0);
Range.insertnode (BTN);
}
}
</script>
<div onmouseup= "Movebutton ()" style= "Width:400px;background-color:cornflowerblue" >
Web front end HTML5 Hello World
</div>
<button id= "button" > button </button>
Copy Code
Compareboundarypoints
Copy Code
<script>
Function B () {
var Boldtext=document.getelementbyid ("Boldtest");
var boldrange=document.createrange ();
Boldrange.selectnodecontents (Boldtext.firstchild);
var selection=document.getselection ();
if (selection.rangecount>0) {
var selrange = selection.getrangeat (0);
if (Selrange.compareboundarypoints (Range.start_to_end, Boldrange) <= 0) {
Alert ("The selected text is in front of the Bold");
} else {
if (Selrange.compareboundarypoints (Range.end_to_start, Boldrange) >= 0)
Alert ("The selected text is behind the Bold");
}
}
}
</script>
<div>
What to do when the rainy day, <b id= "Boldtest" > Suddenly </b> good miss you.
<br/>
<button onclick= "B ()" > Location comparison </button>
</div>
Copy Code
Collapse
Copy Code
<script>
var rangeobj=document.createrange ();
function Selectrangecontens () {
var Div=document.getelementbyid ("div");
Rangeobj.selectnode (DIV);
}
function Unselect () {
Rangeobj.collapse (FALSE);
}
function Showrange () {
Alert (rangeobj.tostring ());
}
</script>
<div id= "Div2" style= "background-color:cadetblue; width:300px;height:50px; " >
Well, what about happiness?
</div>
<button onclick= "Selectrangecontens ()" > select elements </button>
<button onclick= "unselect ()" > Remove elements </button>
<button onclick= "Showrange ()" > Show range Content </button>
Copy Code
Select an element and then click Show Content
What happens when an element is canceled
Detach
The detach method of range, such as Rangeobj.detach () releases the Range object, and other events are not established after release, primarily for releasing the Range object to improve the performance of the application.
HTML5 editing API's Range object
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
