The Selection API gives developers the ability to recognize the screen regions that the user has now selected and to use code to initiate user selections. The addRange() method adds a range to the selection.
Syntax:
addRange(range);
Parameters:
- range: This method has only one parameter. This range parameter is added to the selection.
Return value: This method does not return any specific value.
Example 1: The following code selects some text using the addRange() method and removes the text by using the remove button.
HTML
<!DOCTYPE html><html> <head> <script> var myRange,selection ; function Add(){ selection = window.getSelection() ; myRange = document.createRange(); myRange.selectNodeContents( document.getElementById("data")); selection.addRange(myRange); } function remove(){ selection.removeRange(myRange); } </script></head> <body> <h1 style="color:green;"> neveropen </h1> <h3> Web API selection addrange method</h3> <h2 id="data"> Select this Text</h2> <button onclick="Add();">Add Selection</button> <button onclick="remove();">Remove Selection</button></body> </html> |
Output:
Example 2: The following code selects only strong tags by using the addRange() method.
HTML
<!DOCTYPE html><html> <head> <script> var range,selection,strongs ; function Add(){ selection = window.getSelection() ; strongs = document.getElementsByTagName('strong'); for(const node of strongs){ range = document.createRange(); range.selectNode(node); selection.addRange(range); } } function remove(){ if (selection.rangeCount > 0) { selection.removeAllRanges(); } } </script></head> <body> <h1 style="color:green;">neveropen</h1> <h3> Web API selection addRange method</h3> <h2 id="data"> Hi I am a <strong>Programmer</strong> and <strong >GFG Writer</strong></h2> <button onclick="Add();">Add Selection</button> <button onclick="remove();">Remove Selection</button></body> </html> |
Output:
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
