Home > Developer > JavaScript
Level 2 DOM defines a createRange () method. If the browser follows the DOM standard (IE does not support this standard, however, the attributes or methods in IE are much larger than those defined in the standard.) It belongs to the document Object. Therefore, you must create a range object as follows:
Var oRange = document. createRange ();
If you want to check whether your browser supports this standard Range object, you can use hasFeature () to check:
Var supportsDOMRanges = document. implementation. hasFeature ("Range", "2.0 ");
If (supportsDOMRange ){
Var oRange = document. createRange ();
// Range code here
}
Simple selection of Range objects
The simplest method is to use Range for selection. The selectNode () or selectNodeContents () methods are used. The two methods have only one receiving parameter and one DOM node.
The selectNode () method selects all nodes, including its children, while the Node Selected by selectNodeContents () is only its children. For example, <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 contain the two methods mentioned above, but I believe you can quickly understand the differences between the two methods after reading the following graph:
When you create a Range object, the Range instance has the following attributes:
StartContainer-return the Node object where the range object starts (the first node of the parent node)
StartOffset-returns the offset from the start of Range. If startContainer is a text node, comment node, or CDATA node, this attribute returns the text offset. Otherwise, the index of the first node is returned.
EndCOntainer-returns the last Node object of the Range object (the last node of the parent node)
EndOffset-the offset property at the end of the returned Range is the same as that of startOffset.
CommonAncestorContainer-returns the first node that contains the Range object.
Note: These attributes are read-only. startOffset and endOffset will be explained in detail below.
The following code describes these attributes. Run them in Mozilla firefox (the standard browser-DOM2-level, which is not valid in IE): <Head>
<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>
</Head>
<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>
</Html> the above Code will not be commented out. If you have any questions, leave a message in the comment.
There are other methods in Range:
SetStartBefore (node)-set the starting position of the Range relative to the node
SetStartAfter (node)-Same as above
SetEndBefore-set the end position of the Range relative to the node
SetEndAfter-Same as above
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
