selection, for an explanation

To this text as an example. .

the French state railway company (SNCF) 20, admitted, new order of 2000 train because the body is too wide, can not boot into many domestic railway station platform, which had to spend large sums of funds to renovate the site. SNCF spokesman Christophe Pierre Noel told the French news radio station: "We found the problem seems a bit late We acknowledge this failure and to take responsibility."

A P-tag contains several other nodes and text labels, label contains text nodes.

selection object has several properties that it :( The following are results measured under single chrome, firefox, IE others say)

anchorNode: anchorNode as a starting point the object of Node selection, if the selected text as a "new order of the 2000 fire," then anchorNode it as a "new order of 2000 due to train the body too broad", "the text node .anchorNode there several sub-attributes, I choose useful there are so few: length: the number of text of this node, nextSibling: the next sibling node text node, here Strong label, previousSibling: a label before the text node, here is a B label, textContent: the full text of the text node selected, all text is a "new order of 2000 due to train the body too broad," even if only on "new order of the 2000 fire" more than just a choice. single text, there is no cross-labels to choose, such as "train because the body is too wide, can not boot into the country," such a choice. attribute will not affect them. If anchorNode starting point for the "Secretary (SNCF ) on the 20th admit, 2000 so that the new order of fire "in it? anchorNode starting point for the B label on the inside of the textNode, there is the Ministry of Properties will have a change .length: unchanged, are textNode, nextSibling: changed, B label there is only one textnode, textnode of nextsibling it is null, previousSibling: nextsibling and empathy; textContent: unchanged;
anchorOffset: Based anchorNode is offset starting point node, select the "Order of 2000 due to train the body through" these words, the starting point node as a "new order of the 2000 train because the body is too wide," then offset it 1;
consistent and anchorNode attributes: baseNode. But, then select a different starting point is completely different. If you choose the "Order of 2000 due to train the body through" these words, anchorNode and baseNode attributes exactly. If you choose starting point is 0, that is if anchorOffset 0 properties on completely different up. For example, "New Order of 2000 due to train the body too broad," these words, baseNode starting point is this textNode of previousSibling: B label. Text attribute indicating a property node length, nextsibling, previoussibling label B are
baseOffset: consistent and anchorOffset, and if, as the "new order of 2000 due to train the body too broad," these words, then the value will be previousSibling of textNode of length.
extentNode: End node selection select the text, if the selected text as a "new order of the 2000 fire," then extentNode it as a "new order of the 2000 train because the body is too wide," this property there are several sub-properties useful several consistent and anchorNode and baseNode, length: number of characters of the node, nextSibling: the next sibling node of the text node, here Strong label, previousSibling: the text node before a label, where the label is B , textContent: the full text of the selected text node, all the text is "new order of 2000 due to train the body too broad," even if only on "new order of the 2000 fire." These are just selecting a single word, there is no cross-label options, such as "train because the body is too wide, can not boot into the country," such a choice, then look at the last place in which the selected text "column the train because the body is too wide, can not boot into the country "in which the label is strong domestic label, then it is textNode strong extentNode label, its length, nextSiblint, previousSibling, textContents must make the appropriate changes.
extentOffset: Offset tag last selected character is located. "The train because the body is too wide, can not be moved into the country in the " position within the word is located in the Strong tag is the value of extentOffset.
focusNode: property and is scheduled for exactly the same with extentNode
focusOffset: attributes and definitions fully consistent with extentOffset
getRangeAt: the selected text into a range object can be manipulated. Accepts a parameter, typically filled with 0 representing the start and from 0 Selection of the object is transformed;

Or more properties for the objects out of chrome console selection and inconsistent IEs FF, FF, selection for the following object properties, methods;

FF basic methods of selection and chrome of the same, but less baseNode and extentNode and extentOffset, baseOffset these four attributes, so the sum of the stomach: a source node with the property anchorNode, end node is an attribute of focusNode to

IE selection objects under the above is not the same:

seletion method is completely different from the object attributes and attributes of the W3C selection process;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　RANGE objects

range target is also divided into IE and W3C objects; range of objects can be selected text objects to add, delete, thicker, change pages suitable for rich text editing fonts, and so on. In a large online search, I was able to choose a few properties to the current record.

W3C range: You can create a document can also be created by the selection object. The difference has been selected for the selection of the target range, by selection.getRangeAt (0); obtained from the range selection 0 objects beginning; Document will be created by a little more complicated, we must first determine which elements range from the object, Take the above terms Liezi; Range objects from the DOM object P-tag; in addition, range object has four basic properties:

startContainer: To select the parent node of the target range to start, such as range object is the "SNCF" So startContainer is the text node B of this section of text where the label. This object can be formulated as a text node or nodes are generally.
startOffset: the starting point of a selected range of objects, be it text nodes, comments, etc., then this value is the range where the object of the first word of the text index node; for example, "SNCF" The first word is the object range "national", text node is where the "French state railway company (SNCF) 20, admitted," so Chinese characters in this text the first two. Therefore, it is of value startOffset 2. . If we choose startContainer general node, then the value is an index value of a child node; Lieh Take the above, the choice of range object "can not boot into many domestic railway station platform, which had to spend large sums of money transformation platform. ", startContainer for the P tag words. So startOffset is set to "1";
endOffset: selection rules and consistent startOffset
endContainer: parent node where the target range when the end of the text; such as "Taiwan:" We found the problem seems a bit late. We acknowledge that "it is endContainer text node B node;
commonAncestorContainer: endContainer and startContainer common parent of one of the deepest in this Document (recent); for example, "SNCF" common ancestor of this range where the object is startContainer End and text nodes. If it is, then across the label, such as "20 admitted, new order" startContainer text node B labels, endContainer is P label. Then their common ancestor is the P tag;

General selection : Use range.SelectNode (Dom), together with selected startContainer and endContainer; label comprising; range.SelectNodeContents (Dom); Start addition to the selected content, endContainer, but the contents do not include a label;

Complex selection: to specify where to select where to start the end piece of text; there are two methods for setStart, setEnd; Methods accepts two parameters, the first parameter is the target container range, the second parameter is the index value; start and end2 parameters respectively corresponding to a method setStart (startContainer, startOffset); setEnd (endContainer, endOffset);

These are the basic properties and range object selection method, divided into selection and choose to create their own input parameters; the following is the actual operating range objects, let rich text editing;

insertNode: Insert node, creating a node, such as a span is inserted to the beginning of the range of the object; Usage: range.insertNode (span tags);
surroundContent: Surround node, a node is created, such as the span tag, add objects into the span tag range. Use: general to set the CSS style set the background color and the like for example; Usage: range.surroundContents (span tags); (Note: This method can be used startContaienr endContainer and text nodes and are not cross-range tags such as "station. :. "we found the problem seems a bit late we acknowledge that" this does not work, to an error, the solution is put forward, added to the span, using insetAdjacentHTML add a extractContents method;

extractContents: Extract and delete range object, and returns a document.fragment objects; the equivalent of our cutting function; this method and insertAdjacentHTML with a very fast hardware; example: For example, we "Taiwan:" We found the problem seems a bit late. We acknowledge that "the object of this range, then a part of the B label on the inside, then use this method, then, after cutting, the label B will automatically begin completion and closing tags, content to cut the rest of the content , such as the above cutting range, B tag becomes mistakes and taking responsibility for the "text range label moiety containing B will automatically closed to form a complete label e.g. B: we recognize that this ;

To use insetAdjacentElement, you must know which node is invoked insetAdjacentElement. For example, should cut out content exactly add background color after reduction, then you must know the exact use "insetAdjacentElement" DOM node. insetAdjacentElement can be added in front of the DOM node label content before the start, after the contents, after the end of the label. Respectively beforeBegin, beforeBegin, beforeEnd, afterEnd; know how to call this method the exact DOM node it? In front of the selection object anchorNode and focusNode comes in handy. We were to get these two parent nodes; There are so few possibilities:

1: If the start node is not the parent node of the root node in this example, then the object description anchroeNode range is not a text node child nodes, so we put the extracted range span use add ahchorNode.insetAdjacentElement ( 'afterEnd ', span) to add to the back of the self-closing extractContents through a start node;

2: If the start node is the parent root node in this example, but the end is not the parent node, then is FocusNode.insetAdjacentElement ( 'beforeBegin', span) to add to the front of the node;

3: If the start and end of the parent node of the parent node are the same, then the anchor and illustrate the range of child nodes which are FocusNode; surroundContents to use.

4: an example of the start node is the root node of the parent, the parent node is not the end, then to end the parent node as a starting point, using FocusNode.insetAdjacentElement ( 'beforeBegin', span);

5: If start and end the parent node is an example of the case can be used surroungContents.

But one difference is that, insetAdjacentElement not a valid approach, firefox only supports insetAdjacentHTML in firefox. In the chrome supports HTML, TEXT, ELEMENT.

To use the current how to do it in firefox? InsetAdjacentHTML support only if we use innerHTML span to splice a new span it wants to wow

如：FocusNode.insetAdjacentElement('beforeBegin',""+span.innerHTML+"") problem solved~~

Range to achieve the IE add background colors, and

IE is a selection in the document.selection; acquired object selection selected range document.selection.createRange ();

Because of IE's selection object does not anchorNode and other attributes, add background color, etc. operating on less than insetAdjacentElement this function, it is how to operate it?

IE specific execCommad performed, this method is very powerful, can range objects Alternatively, the style can also be set to other text, input, img tags to the text object range;

Range target acquisition and W3C consistent manner, namely to get through the selection, there is a range created by an object;

selection创建：document.selection.createRange();

Create Object range: IE can be used to create a range of different labels in different selected areas of the object. For example, to create a range object with the body, then select the target area is the entire page range: the acquisition of the entire body range: document.body.createTextRange (); currently support IE range target objects range from the body, input, button, textarea created

Simple Object selection range: range.findText ( "Find text"), returns a bool value, true value is found, is not found to false; e.g. above example, "Company (SNCF)" range.findText ( 'Corporation (the SNCF ) '); return true, you can use execCommad the operation object; Note: use this method when you want to pay attention to the object range by which the label was created. For example, to create a range of objects Button To find the value range objects created by the textarea in the textarea, certainly can not be found;

Complex choices: IE range selection is complicated by moveStart, moveEnd selection range to move back and forth;

This method takes two two parameters, a first mobile type; There are four types:

character: a character moves in accordance with the minimum unit

word: move according word;

sentence: in accordance with the sentence moves;

textedit: move directly to the end of the constituency, start passing this argument is not valid, only end method was also passed in effect

The second parameter is a number, the number of specific mobile can accept negative; digital method is to start the beginning of the range of several counted; end incoming digital count process is started from the end position of this range, is number, then that is the end of the range is the range of the length of the range itself. If it is negative range of length minus negative value (absolute value); such as a piece full range of text, the French state railway company (SNCF) 20, admitted that, look at the following example we want to intercept "railway company" saying:

Examples used herein do Character;

range.moveStart('character',4);

range.moveEnd('character',-11);

Then the range of range of range of this element is to create the beginning of the 4th to 8th position between;

Operating range Object

IE operating range to operate the object by all the execCommad

execCommad has three parameters,

The parameters A, such as the type of operation provided css range of properties, cut, copy, conversion into the range of the text input, textarea labels,

Parameter B, as a bool value, the parameter A is only used for the replacement element, to add the link, the object is to determine whether the pop-up operation, true to pop, pop-up so as not to false;

C parameter, the parameter A specific attributes, such as setting the color of the background color, the replacement ID attribute element, alternative URL of the hyperlink and the like;

Parameter A is part of:

2D-Position allows movement of the object by dragging absolute positioning.
AbsolutePosition set of elements position property to "absolute" (absolute).
BackColor set or get the current background color of the selected area.
BlockDirLTR not currently supported.
BlockDirRTL not currently supported.
Bold switching current selection bolded or not.
BrowseMode not currently supported.
Copy Copy the current selected area to the clipboard.
CreateBookmark create a bookmark anchor or get the current selection or insertion point to the name of a bookmark anchor.
CreateLink insert a hyperlink on the current selection, or to display a dialog box allows the user to specify the URL you want to insert into the current selection a hyperlink.
Cut Copy the current selected area to the clipboard and delete it.
Delete Delete the current selection.
DirLTR not currently supported.
DirRTL not currently supported.
EditMode is not yet supported.
FontName Sets or retrieves the current font selected area.
FontSize Sets or retrieves the current font size of the selected area.
ForeColor Sets or retrieves the current selection of the foreground (text) color.
FormatBlock provided a current block formatting tags.
Indent increased the selected text indent.
InlineDirLTR not currently supported.
InlineDirRTL not currently supported.
InsertButton coverage area with the currently selected button controls.
InsertFieldset covered by the current selection box.
InsertHorizontalRule covering the current selection with the horizontal line.
InsertIFrame covering the current selection with the inline frame.
InsertImage image covering the current selection.
InsertInputButton coverage area with the currently selected button controls.
InsertInputCheckbox covering the current selection with a check box control.
InsertInputFileUpload covering the current selection with the file upload control.
InsertInputHidden insert a hidden control covering the current selection.
InsertInputImage covering the current selection image control.
InsertInputPassword covering the current selection with password control.
InsertInputRadio covering the current selection with the radio button controls.
InsertInputReset covering the current selection with a reset control.
InsertInputSubmit filed with the controls covering the current selection.
InsertInputText coverage area with the currently selected text control.
InsertMarquee covering the current selection empty subtitles.
InsertOrderedList switching the current selection list is the number of blocks or a regular format.
InsertParagraph wrap covered by the current selection.
InsertSelectDropdown covering the current selection with a drop-down box control.
InsertSelectListbox covered by the current selection list box control.
InsertTextArea covering the current selection with multi-line text input control.
InsertUnorderedList switching the current selection is a routine or bulleted list formatting block.
Italic switching current selection italics or not.
JustifyCenter where the current selection in the format block concatenation.
JustifyFull not currently supported.
The current selection JustifyLeft formatting block located left aligned.
JustifyNone not currently supported.
The current selection JustifyRight formatting block located right alignment.
LiveResize force MSHTML editor continually updated during zooming or moving elements of the appearance, not only in the pan or zoom the update is finished.
MultipleSelection allowed when the user holds down the Shift or Ctrl key to select more than one site once optional element.
Open not yet support.
Outdent reduce the selected area where the indented block format.
Switching between insert and overwrite text OverWrite state.
Paste covering the current selection with the contents of the clipboard.
PlayImage not currently supported.
Print to open the Print dialog box so the user can print the current page.
Redo is not yet supported.
Refresh Refresh current document.
RemoveFormat delete formatting tags from the currently selected area.
RemoveParaFormat not currently supported.
SaveAs Saves the current Web page as a file.
SelectAll select the entire document.
SizeToControl not currently supported.
SizeToControlHeight not currently supported.
SizeToControlWidth not currently supported.
Stop is not yet supported.
StopImage not currently supported.
StrikeThrough not currently supported.
Subscript not currently supported.
Superscript is not yet supported.
UnBookmark delete all bookmarks from the current selection area.
Underline switching current selection is displayed underlined or not.
Undo is not yet supported.
Unlink to delete all hyperlinks from the currently selected area.
Unselect clear the current selected selected area.

Column as we want to set the background color it is ragne.execCommad ( 'BackColor', 'true', 'red'); background color is red, the other css properties have been;

Alternatively TextBox element into the textbox and the value set to the value before the replacement:

each text = range.text;

range.execCommad('InsertInputText','false','tba');

Transfer: https://www.cnblogs.com/strangerqt/p/3745426.html

selection, for an explanation

Guess you like