Javascript标准DOM Range操作(1)

原文出处:http://www.never-online.net/blog/article.asp?id=113

2级DOM定义了一个createRange()方法,如果是按照DOM此标准的浏览器(IE并不是支持此标准的,但是IE里的属性或方法却远比标准中定义的多得多),它属于document对象,所以创建一个range对象要这样做:

  1. var oRange = document.createRange();  
如果你要检测你的浏览器是否支持此标准Range对象,可以用hasFeature()方法来检测:
  1. var supportsDOMRanges = document.implementation.hasFeature("Range""2.0");   
  2. if (supportsDOMRange) {   
  3. var oRange = document.createRange();   
  4. //range code here   
  5. }  

Range对象进行简单的选择
最简单用Range进行选择,用selectNode()或者selectNodeContents()方法,这两个方法只有一个接收参数,一个DOM节点。

selectNode()方法选择全部节点,包括它的孩子,而selectNodeContents()选择的节点只是它的孩子。如:
  1. <p id="p1"><b>Hello</b> World</p>   
  2. <script>   
  3. var oRange1 = document.createRange();   
  4. var oRange2 = document.createRange();   
  5. var oP1 = document.getElementById("p1");   
  6. oRange1.selectNode(oP1);   
  7. oRange2.selectNodeContents(oP1);   
  8. </script>  
oRange1和oRange2包含上面所说的两种方法,但是看了下面的示图相信你能很快明白这两个方法的区别:
uploads/200609/30_160954_domranges1.gif


当你创建了一个Range对象时,Range实例就会有以下的属性:
startContainer — 返回range对象从何开始的节点对象(父节点的第一个节点)
startOffset — 返回Range开始的偏移量(offset),如果startContainer是一个文本节点,注释节点,或者是CDATA节点,这个属性返回文本的偏移量,否则返回第一个节点的索引。
endCOntainer — 返回Range对象最后一个节点对象(父节点的最后一个节点)
endOffset — 返回Range结束时的偏移量(offset)特性与startOffset相同。
commonAncestorContainer — 返回第一个包含该Range对象的节点。

注:这些属性均为只读属性(read-only),startOffset和endOffset将在下文中有较详细的解释。

下面这段代码将说明这些属性,请在Mozilla firefox里运行(支持此标准的浏览器——DOM2级,IE里将无效):
  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>  

上面的代码将不作注释了,有什么问题,在评论中留言。

Range中还有一些其它的方法:
setStartBefore(node) — 设置Range的相对于node节点的起始位置
setStartAfter(node) — 同上
setEndBefore — 设置Range的相对于node节点的结束位置
setEndAfter — 同上

你可能感兴趣的:(JavaScript,浏览器,IE,asp.net,asp)