Javascript Standard DOM Range Operation Complete Collection Page 1/3

Level 2 DOM defines a createRange() method. If it is a browser according to the DOM standard (IE does not support this standard, but the properties or methods in IE are much more than those defined in the standard), it belongs to a document object, so you need to create a range object like this:

var oRange = ();

If you want to detect whether your browser supports this standard Range object, you can use the hasFeature() method to detect:

var supportsDOMRanges = ("Range", "2.0");
if (supportsDOMRange) {
var oRange = ();
//range code here
}
Range objects are simple to choose
The simplest way to choose with Range is to use selectNode() or selectNodeContents() methods. These two methods have only one receiving parameter and one DOM node.

The selectNode() method selects all nodes, including its children, and the node selected by selectNodeContents() is just its children. like

<p ><b>Hello</b> World</p>
<script>
var oRange1 = ();
var oRange2 = ();
var oP1 = ("p1");
(oP1);
(oP1);
</script>

oRange1 and oRange2 contain the two methods mentioned above, but after reading the diagram below, I believe you can quickly understand the difference between these two methods:

When you create a Range object, the Range instance will have the following properties:
startContainer — Returns the node object from where the range object starts (the first node of the parent node)
startOffset — Returns the offset from the startContainer starts. If the startContainer is a text node, annotation node, or a CDATA node, this property returns the offset of the text, otherwise it returns the index of the first node.
endCONtainer — Returns the last node object of the Range object (the last node of the parent node)
endOffset — Returns the offset at the end of the Range and the same as the startOffset.
commonAncestorContainer — Returns the first node containing the Range object.

Note: These properties are read-only properties, and startOffset and endOffset will be explained in more detail below.

The following code will explain these properties. Please run them in Mozilla firefox (the browser that supports this standard - DOM2 level, will be invalid in IE):

<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">
function useRanges() {
var oRange1 = ();
var oRange2 = ();
var oP1 = ("p1");
(oP1);
(oP1);

("txtStartContainer1").value
    = ;
("txtStartOffset1").value =
    ;
("txtEndContainer1").value =
    ;
("txtEndOffset1").value =
    ;
("txtCommonAncestor1").value =
    ;
("txtStartContainer2").value =
    ;
("txtStartOffset2").value =
    ;
("txtEndContainer2").value =
    ;
("txtEndOffset2").value =
    ;
("txtCommonAncestor2").value =
    ;
}
</script>
</head>
<body><p ><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" /><br />
Start Offset:
    <input type="text" /><br />
End Container:
    <input type="text" /><br />
End Offset:
    <input type="text" /><br />
Common Ancestor:
    <input type="text" /><br />
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container:
    <input type="text" /><br />
Start Offset:
    <input type="text" /><br />
End Container:
    <input type="text" /><br />
End Offset:
    <input type="text" /><br />
Common Ancestor:
    <input type="text" /><br />
</fieldset>
</td>
</tr>
</table>
</body>
</html>

The above code will not be commented. If you have any questions, leave a message in the comments.

There are some other methods in Range:
setStartBefore(node) — Set the starting position of the Range relative to the node node
setStartAfter(node) — Same as above
setEndBefore — Sets the end position of the Range relative to the node node
setEndAfter — Same as above

123Next pageRead the full text