/** * DOM Standard range *///Create range var range = Document.createrange ();//select Dom as Range Range.selectnode (DOM);//select DOM Contents/ The child node acts as a range range.selectnodecontents (DOM);//sets the range start before the DOM Range.setstartbefore (DOM);// Sets the start of the range after the Dom Range.setstartafter (DOM);//sets the end of the range to the DOM before Range.setendbefore (DOM);//sets the end of the range after the Dom Range.setendafter ( DOM);//Direct Set range start//@param dom:startcontainer. Parameter 1, referring to the node, as a range of startcontainer//@param offset:startoffset. Parameter 2, start offset Range.setstart (Startcontainer, startoffset);//Direct Set range end point Range.setend (EndContainer, endoffset);// Delete the contents of the scope range.deletecontents ();//Delete the contents of the scope and return the content to range.extractcontents ();//Create a copy of the contents of the scope range.clonecontents ();/ Insert the contents of the bounding box//@param DOM: The node to surround the content of the range//1. Extract the contents of the range, similar to extractcontents ()//2. Inserts the DOM into the range of the original location//3. Adds the contents of the document fragment to the DOM Range.surroundcontents (DOM);//clears the range, but does not delete the contents, also called the collapsed range Range.collapse (true); True collapses at the beginning of the range, false ends range.collapsed; Returns whether or not it has been collapsed//compare Dom range, compareboundarypoints ()//If the first range is measured before the second range is measured point, return-1; the same returns 0; if you return 1//Start_to_start (0) after that, Start_to_end (1), End_to_start (2), end_to_end (3) range1.compareboundarypoints (range.start_to_start,range2);//replication range var rangecloned = Range.clonerange ();// Clean and destroy the range Range.detach ();/** * IE standard range * under IE, the scope is mainly for text, not the DOM standard node *///create text range//created element must be <body/>,<button/ >,<input/>,<textarea/> instead of document//<body/> creates a range that can be used anywhere, other elements can only be created internally using var range = Document.body.createTextRange ();//Specify the range by given text var found = range.findtext (' hello '); The first instance found var Foundagain = range.findtext (' Hello ', 1); A positive number indicates that the search continues forward, and a negative number indicates a search//selection of specific DOM text, including HTML tags, similar to the DOM Selectnode () Range.movetoelementtext (DOM); alert ( Range.htmltext);//Parentelement (), Dom-like Commonancestorcontainervar commonancestor = Range.parentelement ();// After you create a simple selection, you can use Move (), MoveStart (), MoveEnd (), expand () to further position the range//These methods accept two parameters: the number of units moved and the units moved//units include: ' character ', ' Word ', ' sentence ', ' TextEdit ' range.movestart (' word ', 2); Range.moveend (' character ', 1); Range.move (' character ', 5); Move () will first collapse the range, then move, after the move must call MoveStart (), moveEnd ()//with the scope of interaction Range.Text = ' Hello2 '; range.pasteHTML (' <em>hello3</em> '); Note Use HTML syntax in pastehtml correct//collapse range Range.collapse (true); True|false is the same as the DOM standard//is collapsed, is used boundingwidth, returns the range width of the pixel value//also has boundingheight, Boundingtop, Boundingleftvar isCollapsed = 0 = = = range.boundingwidth;//comparison range, similar to Dom's compareboundingpoints ()//Parameter value: ' Starttostart ', ' starttoend ', ' Endtoend ', ' Endtostart ' range1.compareendpoints (' Starttostart ', range2); range1.isequal (Range2); The range 1 is exactly the same as the range 2 Range1.inrange (range2); Range 1 contains range 2, range 2 in range 1 Internal//Create range replica var rangecloned = Range.duplicate ();
Scope of javascript: Range