1 <html>2 <head>3 <title>DOM Range Example</title>4 <script type="text/javascript">5 function useRanges() {6 var oRange1 = document.createRange();7 var oRange2 = document.createRange();8 var oP1 = document.getElementById("p1");9 oRange1.selectNode(oP1);10 oRange2.selectNodeContents(oP1);11 12 document.getElementById("txtStartContainer1").value 13 = oRange1.startContainer.tagName;14 document.getElementById("txtStartOffset1").value = 15 oRange1.startOffset;16 document.getElementById("txtEndContainer1").value = 17 oRange1.endContainer.tagName;18 document.getElementById("txtEndOffset1").value = 19 oRange1.endOffset;20 document.getElementById("txtCommonAncestor1").value = 21 oRange1.commonAncestorContainer.tagName;22 document.getElementById("txtStartContainer2").value = 23 oRange2.startContainer.tagName;24 document.getElementById("txtStartOffset2").value = 25 oRange2.startOffset;26 document.getElementById("txtEndContainer2").value = 27 oRange2.endContainer.tagName;28 document.getElementById("txtEndOffset2").value = 29 oRange2.endOffset;30 document.getElementById("txtCommonAncestor2").value = 31 oRange2.commonAncestorContainer.tagName;32 }33 </script>34 </head>35 <body><p id="p1"><b>Hello</b> World</p>36 <input type="button" value="Use Ranges" onclick="useRanges()" /> 37 <table border="0">38 <tr>39 <td>40 <fieldset>41 <legend>oRange1</legend>42 Start Container: 43 <input type="text" id="txtStartContainer1" /><br />44 Start Offset: 45 <input type="text" id="txtStartOffset1" /><br />46 End Container: 47 <input type="text" id="txtEndContainer1" /><br />48 End Offset: 49 <input type="text" id="txtEndOffset1" /><br />50 Common Ancestor: 51 <input type="text" id="txtCommonAncestor1" /><br /> 52 </fieldset>53 </td>54 <td>55 <fieldset>56 <legend>oRange2</legend>57 Start Container: 58 <input type="text" id="txtStartContainer2" /><br />59 Start Offset: 60 <input type="text" id="txtStartOffset2" /><br />61 End Container: 62 <input type="text" id="txtEndContainer2" /><br />63 End Offset: 64 <input type="text" id="txtEndOffset2" /><br />65 Common Ancestor: 66 <input type="text" id="txtCommonAncestor2" /><br />67 </fieldset>68 </td>69 </tr>70 </table>71 </body>72 </html>Enlace
El enlace para compartir es: