DOM Range Selections

The DOM Range API ( http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ ) introduced in DOM Level 2 is another convenience extension that allows you to select a range of content in a document programmatically. To create a range, use document.CreateRange() , which will return a Range object.

 var  myRange = document.createRange(); 

Once you have a Range object, you can set what it contains using a variety of methods . Given our example range, we might use myRange .setStart() , myRange .setEnd() , myRange .setStartBefore() , myRange .setStartAfter() , myRange .setEndBefore() , and myRange .setEndAfter() to set the start and end points of the range. Each of these methods takes a Node primarily, though setStart() and setEnd() take a numeric value indicating an offset value. You may also just as easily select a particular node using myRange.selectNode() or its contents using myRange.selectNodeContents() . A simple example here selects two paragraphs as a range.

 <<p id="p1">>This is sample <<em>>text<</em>> go ahead and create a <<i>>selection<</i>>  over a portion of this paragraph.<</p>> <<p id="p2">>Another paragraph<</p>> <<p id="p3">>Yet another paragraph.<</p>> <<script type="text/javascript">> <<!-- var myRange; if (document.createRange)  {   myRange = document.createRange();   myRange.setStartBefore(document.getElementById('p1'));   myRange.setEndAfter(document.getElementById('p2'));   alert(myRange);   /* Now highlight using Mozilla style selections */   mySelection = window.getSelection();   mySelection.addRange(myRange);  }  //-->> <</script>> 

Once you have a range, you can perform a variety of methods upon it, including extractContents() , cloneContents() , and deleteContents() , and even add contents using insertNode() . While the Range API is quite interesting, it is at the time of this edition s writing only partially implemented in Mozilla. Internet Explorer uses a completely different proprietary method for ranges and selections.