The DOM scope allows you to select an area of the document without taking into account the boundaries of the node, such as the processing of text highlighting that can be implemented using scopes.
1. Creation of range
Use the document's Createrange to create a range that returns a range instance that has many properties and methods, as follows:
Startcontainer: node containing the start of a range
Startoffset: The offset of the range starting point in Startcontainer, both node index
EndContainer: The node that contains the end of the range
Endoffset: Offset of range end point at EndContainer, node index +1
Detecting whether the browser supports scopes
Document.implementation.hasFeature (' Range ', ' 2.0 ') ORtypeof Document.createrange = = = ' functionCreate scope
var range = Document.createrange ();
Support for text range (Document.body.createTextRange) because DOM range is not supported by IE8 and the following browsers
var range = Document.body.createTextRange ();
2. Example method of range
Suppose you have an HTML document that looks like this
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width"> <title>JS Bin</title></Head><Body> <Divclass= "outer"ID= "outer"> <Divclass= "inner"ID= "Inner1">Hello world!</Div> <Divclass= "inner"ID= "Inner2"><span>How are you</span></Div> </Div></Body></HTML>
Select a part of the document , you can use the Selectnode or Selectnodecontents method, as shown below
var range = Document.createrange (); Range.selectnode (Inner1); Console.log (range.startoffset); // 1 because a space is treated as a text node ---------------------------------------------------var range = Document.createrange (); range.selectnodecontents (outer); Console.log (range.endoffset); // 5
// IE8 below var range = document.body.createTextRange (); Range.findtext ("Hello"); Console.log (Range.Text) ; // Hello Range.movetoelementtext (Inner1); Console.log (range.htmltext);You can also use methods such as Setstartbefore, Setstartafter, Setendbefore, Setendafter, and so on to select a document range
var range = document.createrange (); Range.setstartbefore (Inner1); Range.setendbefore (Inner2); Console.log (Range.endoffset);//3
You can also use Setstart and setend to choose between the two functions require two parameters, a reference node, an offset, for Setstart, the reference node is Startcontainer, and setend reference node is EndContainer
var range = document.createrange (); Range.setstart (Inner1,0); Range.setend (Inner1, Inner1.childNodes.length); Console.log (range.endoffset);//1
// IE8 below // start move 2 words // The end point moves 1 characters -----------------------------------------"character": Move the characters one by one. word: Moves by Word (a series of non-whitespace characters). "sentence": Move the sentence one by one (a series of characters ending with a period, question mark, or exclamation). "TextEdit": Moves to the start or end position of the current range selection.
Manipulate content in a selection
1. Remove the contents of the selection from the document DeleteContents and extractcontents, the difference is that the latter will return the deleted document fragment, as shown below
var range = document.createrange (); Range.setstart (Inner1.firstchild,0); Range.setend ( Inner1.firstchild,5); // range.deletecontents (); var fragment = range.extractcontents (); Box.appendchild (fragment);
2, copy the selection content clonecontents, copy out only the copy of the node in the range, not the real node
var range = document.createrange (); Range.setstart (outer,0); Range.setend (outer, Outer.childNodes.length); var fragment = range.clonecontents (); Box.appendchild (fragment);
3. Insert content into the range insertnode or surroundcontents
var range = Document.createrange (); Range.selectnodecontents (outer); var span = document.createelement (' span ' = "I Know" ;range.insertnode (span); // at the beginning of the range------------------------------------------------------------ ------var range = Document.createrange (); Range.setstart (Inner1.firstchild, 0 5 var span = document.createelement (' span ' = "Red" ;range.surroundcontents (span); // IE8 below var range = document.body.createTextRange (); Range.findtext ("Hello"= "Howdy"; -------------------------------------range.pastehtml ("<em>Howdy</em>"); // similar to range.surroundcontents4. Copy range and clear range
Copy range, using the Clonerange method, which copies a copy of the specified range, detaches the range from the document using the Detach method, and then unlocks the scope reference
var range = document.createrange (); Range.setstart (Inner1.firstchild,0); Range.setend ( Inner1.firstchild,5); var rangebak = range.clonerange (); var fragment =null;
Notes:dom Range
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
