A study of Range object in HTML5

One: The concept of a Range object

A Range object represents a contiguous area on a page that, through the Range object, allows you to 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 on the page (note: the Selection object is not supported by a browser that has been tested IE9 below) , you can create a Selection object by using the following statement;

var selection = Document.getselection (); Or

var selection = Window.getselection ();

Each Selection object has one or more range objects, each of which represents a contiguous area within the range selected by the user's mouse, and in Firefox, you can select multiple contiguous regions by using 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 selection The Getrangeat method of the object, as follows:

var range = document.getselection (). getrangeat (index);

The Getrangeat method has a parameter index representing the serial number of the Range object, and we can judge whether the user chooses the content by the value of the Rangecount parameter of the Selection object;

1. The value of this parameter is 0 when the user does not press the mouse.
2. When the user presses the mouse, the value of the parameter is 1.
3. 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 selection areas.
4. When the user cancels the selection of the zone, the property value is 1, representing an empty Range object on the page;

The following code tests:

<input type= "button" value= "click Me" onclick= "rangetest ()"/>
<div id= "Showrange" ></div>

The JS code is as follows:

<script>    function Rangetest () {        var  html,  & nbsp;      Showrangediv = document.getElementById ("Showrange"),     
     selection = Document.getselection ();         if (Selection.rangecount > 0) {      
      HTML = "you selected" + Selection.rangecount + "paragraph content <br/>";             for (var i = 0; i < Selection.rangecount i++) {& nbsp;               var range =
Selection.getrangeat (i);                 HTML + + "cap" + (i + 1) + "
Paragraph content is: "+ range +" <br/> ";            }             showrangediv.innerhtml = html;        }    } </script>

As on the code, when the user selects a paragraph of text, click the button, will display the selected text, the following under the Firefox effect:

The following is shown in the Chrome browser:

Two: The properties and methods of the Range object

The properties are as follows:

Collapsed (Boolean): Used to determine whether the start point of the range represented by the Range object is in the same position as the end point, if the same property value returns true;

Commonancestorcontainer: Used to return the node in which the range represented by the Range object is located, which is a node that contains the lowest level node of the zone (one node may be an element, or it may be a complete text).

EndContainer (node): is used to return the endpoint of the range that the Range object represents, which is the lowest-level node that contains the endpoint of that zone.

Endoffset (integer value type): Returns the distance between the end of the range represented by the Range object and the starting point of the node that contains the end point.

Startcontainer (node): Returns the node in which the starting point of the range represented by the Range object is located, which is the lowest-level node that contains the beginning of the range.

Startoffset (integer value type): Returns the distance between the starting point of the range represented by the Range object and the beginning of the node that contains the starting point.

There are many methods below, the meaning of the method is more difficult to understand, my side is also to see the book so written, by the way I did a demo test, understand the meaning. Later need to use the can look at it;

Selectnode method: The Selectnode method of a Range object is used to specify the starting point of a Range object as the starting point for a node, specifying the end of the Range object as the endpoint of that node, so that the Range object represents a range that contains the node. Use the following methods:

Rangeobj.selectnode (node);

The rangeobj above represents a Range object that uses a parameter to represent a node in the page.

Selectnodecontents method: Lets you specify the start point of a Range object as the starting point for all content in a node, specifying the end of the Range object for all content of the node, so that the Range object represents all the contents of that node. Use the following methods:

Rangeobj.selectnodecontents (node);

meaning as shown above;

DeleteContents method: Used to remove content contained in a Range object from the page, as follows:

Rangeobj.deletecontents ();

Let's do a demo to understand the top three methods below:

<div id= "div" style= "background-color: #e0a0b0; width:300px;height:50px;" Contents of > elements </div>
<button onclick= "deleterangecontents (True)" > Delete content </button>
<button Onclick= "Deleterangecontents (False)" > delete element </button>

The page appears as follows:

The JS code is as follows:

<script>     function deleterangecontents (flag) {       
var div = document.getElementById ("div");
        var rangeobj = Document.createrange ();         if (flag) {                         // Selectnodecontents refers to all content in the selected Range object   Delete out           
  Rangeobj.selectnodecontents (DIV);
            rangeobj.deletecontents ();        }else {          
  Rangeobj.selectnode (DIV);
            rangeobj.deletecontents ();        }    } &LT;/SCRIPT&GT 

When the code finishes Document.createrange (), let's see what the value of the Rangeobj object is,

When you click on the deletion of the content, delete the corresponding content, as shown below:

Code executes to the following, the value of the Rangeobj object becomes as follows:

When we click on the button to delete the element, as follows:

At this point the Rangeobj object becomes as follows:

Setstart method is used to designate a location in a node as the starting point for the range represented by the Range object, as follows:

Rangeobj.setstart (Node,curindex);

As the above code Rangeobj represents a Range object, the Setstart method uses 2 arguments, the first parameter node represents a node, and the second parameter is a number, and when the first argument node represents a text node with a text, The parameter value is used to specify the end position of the first few text as the starting point for the range represented by the Range object; When the first parameter node represents a node in which the other child nodes are included, the parameter value is used to specify the end position of the several child nodes as the starting point of the range represented by the Range object;

SetEnd method is used to specify a location in a node where the Range object represents the end of the range. The use method looks like this:

Rangeobj.setend (Node,curindex);

The 2 parameters in this method have the same meaning as the parameters in the Setstart method; only one is the starting position and the other is the ending position;

Let's look at a demo to understand the meaning of the 2 methods above, the code is as follows:

<div id= "Mydiv" > This text will be deleted from the third text to the tenth text </div>
<button onclick= "Deletechar ()" > Delete text </button>

The JS code is as follows:

<script>
function Deletechar () {
var mydiv = document.getElementById ("mydiv");
var textnode = Mydiv.firstchild;
var rangeobj = Document.createrange ();
Rangeobj.setstart (textnode,2);
Rangeobj.setend (textnode,10);
Rangeobj.deletecontents ();
}
</script>

When we click the Delete Text button, the 3rd to the 10th text is deleted ~

Setstartbefore method: lets you specify the start position of a node as the starting point for the range that the Range object represents.

Setstartafter method: is used to designate a node's endpoint position as the starting point for the range represented by the Range object.

Setendbefore method: Use to designate a node's start position as the end position of the range represented by the Range object.

Setendafter method: Use to specify the end position of a node as the destination for the range represented by the Range object.

The use method looks like this:

Rangeobj.setstartbefore (node);

Rangeobj.setstartafter (node);

Rangeobj.setendbefore (node);

Rangeobj.setendafter (node);

Let's start with a demo to understand the top four methods below:

<table id= "myTable" border = "1" cellspacing= "0" cellpadding= "0" >
<tr>
<td> first Row first column </td>
<td> first row, second column </td>
</tr>
<tr>
<td> second row first column </td>
<td> second row, second column </td>
</tr>
</table>
<button onclick= "Deletefirstrow ()" > Delete First line </button>

The JS code looks like this:

<script>
function Deletefirstrow () {
var myTable = document.getElementById ("myTable");
if (MyTable.rows.length > 0) {
var row = mytable.rows[0];
var rangeobj = Document.createrange ();
Rangeobj.setstartbefore (row);
Rangeobj.setendafter (row);
Rangeobj.deletecontents ();
}
}
</script>

As shown in the code above, the first row of the table will be deleted when the user clicks the Delete first line button;

Clonerange Method The Clonerange method of the Range object is used to copy the current Range object, which returns the copied Range object, which uses the following example:

var rangeclone = Rangeobj.clonerange ();

We can take a look at a demo example, as follows:

<div id= "Test" >aaaa</div>

The JS code is as follows:

<script>
function Clonearange () {
var testobj = document.getElementById ("test");
var rangeobj = Document.createrange ();
Rangeobj.selectnodecontents (Testobj);
var rangeclone = Rangeobj.clonerange ();
alert (Rangeclone);
}
</script>

As shown in the following illustration:

clonecontents method This method is used to append a section of HTML code to the page and to clone the HTML code in the area represented by the Range object into the appended HTML code;

The use method looks like this:

var html = rangeobj.clonecontents ();

The method does not use any arguments, and the method returns a DocumentFragment object that is a container element that becomes useful when you need to append, delete, modify, or find elements on the page;

As shown in the following code:

<div id= "div" >     instance text     <br/>
    <button onclick= "clonedivcontent ()" > Clone </button>
</div>

The JS code is as follows:

<script>
function Clonedivcontent () {
var div = document.getElementById ("div");
var rangeobj = Document.createrange ();
Rangeobj.selectnodecontents (DIV);
var documentfragment = rangeobj.clonecontents ();
Div.appendchild (DocumentFragment);
}
</script>

As the code above, the user clicks the Clone button on the page to clone the contents of the DIV element to the bottom of the div element; Let's look at the properties of the DocumentFragment object as follows:

extractcontents method is used to clone the HTML code in the area represented by the Range object into a DocumentFragment object, and then delete the HTML code from the page;

The method is used in the following ways:

var documentfragment = rangeobj.extractcontents ();

This method returns a DocumentFragment object that contains the HTML code in the range represented by the Range object.

As shown in the following code:

<div id= "Srcdiv" style= "width:300px;height:50px;background-color:red;" >demo</div>
<div id= "Destdiv" style= "Width:300px;height:50px;background:blue;" >demo2</div>
<button onclick = "movecontent ()" > move element content </button>

The JS code is as follows:

<script>
function Movecontent () {
var srcdiv = document.getElementById ("Srcdiv");
var destdiv = document.getElementById ("Destdiv");
var rangeobj = Document.createrange ();
Rangeobj.selectnodecontents (SRCDIV);
var documentfragment = rangeobj.extractcontents ();
Destdiv.appendchild (DocumentFragment);
}
</script>

The original page is as follows:

Click the button and then turn to the following:

Insertnode Method: This method is used to insert the specified node into the range represented by a Range object, where the insertion position is the starting point for the range represented by the Range object, and if the node already exists in the page, the node is moved to the beginning of the range represented by the Range object. Use the following methods:

Rangeobj.insertnode (node);

The following demo:

The code is as follows:

<div onmouseup= "Movebutton ()" style= "width:400px;height:100px;background-color:red" >aaaaaaaaabbbbbb</ div>
<button id= "button" > button </button>

The JS code is as follows:

<script>
function Movebutton () {
var button = document.getElementById ("button");
var selection = Document.getselection ();
if (Selection.rangecount > 0) {
var range = selection.getrangeat (0);
Range.insertnode (button);
}
}
</script>

The page is initialized as follows:

When the key is pressed at the appropriate place, it becomes the following:

The above is a number of basic knowledge points; for the next document upload pictures need to use the knowledge, you can first understand the next some basic knowledge points ~