The Level 2 DOM defines a Createrange () method, which is a document object, if the browser (ie does not support this standard by the DOM), but the properties or methods in IE are far more than defined in the standard. So create a Range object to do this:
var oRange = Document.createrange ();
If you want to check whether your browser supports this standard Range object, you can use the Hasfeature () method to detect:
var supportsdomranges = document.implementation.hasFeature ("Range", "2.0");
if (Supportsdomrange) {
var oRange = Document.createrange ();
Range code here
}
Range object for a simple selection
The simplest choice with range is to use the Selectnode () or Selectnodecontents () method, which has only one receive parameter and one DOM node.
The Selectnode () method selects all nodes, including its children, while Selectnodecontents () selects the node that is its child. Such as
<p id= "P1" ><b>Hello</b> world</p>
<script>
var oRange1 = Document.createrange ();
var oRange2 = Document.createrange ();
var oP1 = document.getElementById ("P1");
Orange1.selectnode (oP1);
Orange2.selectnodecontents (oP1);
</script>
ORange1 and ORange2 include the two methods mentioned above, but looking at the following figure shows that you can quickly understand the difference between the two methods:
When you create a Range object, the range instance has the following properties:
Startcontainer-returns the Node object from which the Range object starts (the first node of the parent node)
startoffset-returns the offset at the start of range, if Startcontainer is a text node, a comment node, or a CDATA node, which returns the offset of the text, otherwise the index of the first node is returned.
endcontainer-returns the last node object of a Range object (the last node of the parent node)
endoffset-returns the offset (offset) attribute at the end of range to the same as Startoffset.
commonancestorcontainer-returns the first node that contains the Range object.
Note: These properties are all read-only (read-only), and Startoffset and Endoffset will be explained in more detail in the following article.
The following code will illustrate these properties, please run in Mozilla Firefox (browsers that support this standard--dom2, IE will not work):
<title>dom Range example</title>
<script type= "Text/javascript" >
function Useranges () {
var oRange1 = Document.createrange ();
var oRange2 = Document.createrange ();
var oP1 = document.getElementById ("P1");
Orange1.selectnode (oP1);
Orange2.selectnodecontents (oP1);
document.getElementById ("TxtStartContainer1"). Value
= ORange1.startContainer.tagName;
document.getElementById ("TxtStartOffset1"). Value =
Orange1.startoffset;
document.getElementById ("TxtEndContainer1"). Value =
ORange1.endContainer.tagName;
document.getElementById ("TxtEndOffset1"). Value =
Orange1.endoffset;
document.getElementById ("TxtCommonAncestor1"). Value =
ORange1.commonAncestorContainer.tagName;
document.getElementById ("TxtStartContainer2"). Value =
ORange2.startContainer.tagName;
document.getElementById ("TxtStartOffset2"). Value =
Orange2.startoffset;
document.getElementById ("TxtEndContainer2"). Value =
ORange2.endContainer.tagName;
document.getElementById ("TxtEndOffset2"). Value =
Orange2.endoffset;
document.getElementById ("TxtCommonAncestor2"). Value =
ORange2.commonAncestorContainer.tagName;
}
</script>
<body><p id= "P1" ><b>Hello</b> world</p>
<input type= "button" value= "Use Ranges" onclick= "useranges ()"/>
<table border= "0" >
<tr>
<td>
<fieldset>
<legend>oRange1</legend>
Start Container:
<input type= "text" id= "TxtStartContainer1"/><br/>
Start Offset:
<input type= "text" id= "TxtStartOffset1"/><br/>
End Container:
<input type= "text" id= "TxtEndContainer1"/><br/>
End Offset:
<input type= "text" id= "TxtEndOffset1"/><br/>
Common Ancestor:
<input type= "text" id= "TxtCommonAncestor1"/><br/>
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container:
<input type= "text" id= "TxtStartContainer2"/><br/>
Start Offset:
<input type= "text" id= "TxtStartOffset2"/><br/>
End Container:
<input type= "text" id= "TxtEndContainer2"/><br/>
End Offset:
<input type= "text" id= "TxtEndOffset2"/><br/>
Common Ancestor:
<input type= "text" id= "TxtCommonAncestor2"/><br/>
</fieldset>
</td>
</tr>
</table>
</body>
The code above will not be commented on, what's the problem, leave a message in the comments.
There are other methods in range:
Setstartbefore-Sets the starting position of the range relative to the node
Setstartafter (node)-ditto
Setendbefore-sets the end position of the range relative to node nodes
Setendafter-ditto
Current 1/3 page
123 Next read the full text
