getSelection、range对象属性，⽅法理解，解释 ⽹上转了⼀圈发现没有selection⽅⾯的解释，⾃⼰捣⿎下
以这段⽂字为例⼦。。
<p><b>法国国营铁路公司(SNCF)20⽇承认,</b>新订购的2000列⽕车因车体过宽，<strong>⽆法开进国内许多⽕车站的站台，从⽽不得不花⼤笔资⾦改造站台。</strong>法国国营铁路公司发⾔⼈克⾥斯托夫·⽪耶诺埃尔告诉法国新闻电台：“我们发现问题晚了点。<b>我们承认这⼀失误并为此承担责任。”</b></p>⼀个P标签包含了⽂字节点以及其他⼏个标签，标签中包含了⽂字节点。 selection 对象有⼀下⼏个属性：（以下都为chrome下单测的结果，firefox，IE另说）全自动挤出中空吹塑机
anchorNode:anchorNode为selection对象的起点Node，假如选中的⽂字为“新订购的2000列⽕”，那么anchorNode就为“ 新订购的2000列⽕车因车体过宽”， ”这个⽂字节点。anchorNode还有⼏个⼦属性，我选出有⽤的有这么⼏个：length：这个节点的⽂字个数、nextSibling：这个⽂字节点的下⼀个同级节点，这⾥为 Strong标签、previousSibling：这个⽂字节点的前⼀个标签，这⾥是 B标签、textContent：这个选中的⽂字节点的全部⽂字，全部⽂字就是“ 新订购的2000列⽕车因车体过宽， ”即便只选择了“ 新订购的2000列⽕ ”。以上只是选择了单个的⽂字，还没有跨标签进⾏选择，⽐如“ 列⽕车因车体过宽，< strong>⽆法开进国内”这样的选择。也不会属性对其造成影响。假如anchorNode起点为“ 司(SNCF)20⽇承认,</b>新订购的2000列⽕ ”这样的呢？anchorNode起点就为 B 标签⾥⾯的textNode，有部分属性就会产⽣变化。length：不变，都是textNode，nextSibling：变化了，B标签⾥⾯只有⼀个
textnode，textnode的nextsibling就为null、previousSibling：和nextsibling 同理；textContent：不变；
anchorOffset：基于anchorNode也就是起点节点的偏移量，选中“ 订购的2000列⽕车因车体过 ”这段话，起点节点为“ 新订购的2000列⽕车因车体过宽 “ 那么偏移量就为1；
baseNode：和anchorNode 属性⼀致。但是选择的起点不同的话则完全不⼀样。假如选择” 订购的2000列⽕车因车体过 “ 这段话，anchorNode和baseNode的属性完全⼀致。假如选择起点为0，即anchorOffset为0的话属性就完全不⼀样了。⽐如” 新订购的2000列⽕车因车体过宽， “这段话，baseNode的起点就是这个textNode的previousSibling： B标签。其属性length、
nextsibling，previoussibling都为B标签的⽂字节点属性
baseOffset：和anchorOffset的⼀致，如果像” 新订购的2000列⽕车因车体过宽， “这段话的话，那么值就为previousSibling的
textNode的length。
extentNode：selection选中⽂字的结束节点，假如选中的⽂字为“ 新订购的2000列⽕ ”，那么extentNode就为“ 新订购的2000列⽕车因车体过宽”，这个属性还有⼏个⼦属性，有⽤的⼏个和anchorNode和baseNode基本⼀致，length：这个节点的⽂字个数、nextSibling：这个⽂字节点的下⼀个同级节点，这⾥为 Strong标签、previousSibling：这个⽂字节点的前⼀个标签，这⾥是 B标签、textContent：这个选中的⽂字节点的全部⽂字，全部⽂字就是“ 新订购的2000列⽕车因车体过宽，”即便只选择了“ 新订购的2000列⽕ ”。以上只是选择了单个的⽂字，还没有跨标签进⾏选择，⽐如“ 列⽕车因车体过宽，<strong>⽆法开进国内 ”这样的选择的话，看最后选中的⽂字所处的地⽅，“ 列⽕车因车体过宽，<strong>⽆法开进国内 ” 国内所处的标签是 Strong标签，那么extentNode就为Strong标签的
textNode，其length，nextSiblint,previousSibling，textContents都要做出相应的改变.
extentOffset：选中⽂字最后所处的标签的偏移量。“ 列⽕车因车体过宽，<strong>⽆法开进国内 ” 这个内字在Strong标签内所处的位置就是extentOffset的值。
focusNode：属性和定于与extentNode完全⼀致
focusOffset：属性和定义与extentOffset完全⼀致
getRangeAt：把选中的⽂字转化为range对象，可以进⾏操作。接受⼀个参数，⼀般填写为0，表⽰从selection对象的0开是进⾏转化；以上的属性为chrome下console selection对象出来的与FF IE不⼀致，下⾯来说FF的selection对象属性，⽅法；
FF的selection ⽅法基本和chrome的⼀样，但是少了baseNode和extentNode以及extentOffset,baseOffset这4个属性，所以综上所述胃：起点节点⽤的属性为anchorNode，结束节点为focusNode的属性即可
IE下的的selection对象与上⾯⼜不相同为：
seletion对象属性和⽅法完全不同于W3C的selection之属性，⽅法；
RANGE对象
range对象也分为IE和W3C对象；range对象可以对选中的⽂字进⾏添加对象，删除，变粗，改变字体等适合⽤于⽹页富⽂本编辑等。在⽹上⼀搜⼀⼤⽚，我选⼏个⽬前能⽤到的属性来记录下。
信号转换器W3C range：可以由selection对象创建也可以由document来创建。两者的区别为selection已经选好的range对象，通过
燃煤烤箱
startContainer：要选中的range对象开始的⽗节点，⽐如range对象是“法国国营铁路公司” 那么startContainer就是这个段⽂字所在标签B的⽂字节点。这个对象是可以被制定为⽂字节点或则⼀般节点。
startOffset：选中的range对象的起点，假如是⽂字节点，注释等，那么这个值就是这个range对象第⼀个字所在该⽂字节点的索引值；
⽐如“国营铁路公司”这个range对象第⼀个字是“国”，所在的text节点是“ 法国国营铁路公司(SNCF)20⽇承认, ” 那么国字在这段⽂字的第2个。所以startOffset的值就为2。。万⼀我们选择的startContainer为⼀般节点，那么该值就为⼦节点的索引值；就拿上⾯列⼦来说，选择range对象为“ ⽆法开进国内许多⽕车站的站台，从⽽不得不花⼤笔资⾦改造站台。 ”，startContainer为P标签的话。那么startOffset就为“ 1 ”；
endOffset：选择规则和startOffset⼀致
endContainer：range结束时⽂字的⽗对象所在节点；⽐如” 台：“我们发现问题晚了点。<b>我们承认这⼀ “ 那么endContainer就是B
节点的⽂本节点；
commonAncestorContainer：endContainer和startContainer的共同⽗节点在这个Document最深的⼀个（最近的⼀个）；⽐如“法国国营铁路公司“ 这种range对象所在End和startContainer的共同祖先都是⽂本节点。如果是跨标签的话，⽐如” 20⽇承认,</b>新订购的 “startContainer是B标签的⽂本节点，endContainer是P标签。那么他们的共同祖先就是P标签；
⼀般选择：使⽤range.SelectNode(Dom)连同startContainer和endContainer⼀同选中；包含标签；range.SelectNodeContents(Dom)；选中除了start,endContainer之外的内容，只是内容，不包含标签；
复杂选择：可以指定选择某段⽂字从哪开始从哪结束；有2个⽅法，为setStart,setEnd；⽅法分别接受2个参数，第⼀个参数为这个range 对象的container，第2个参数为索引值；start和end2个⽅法的参数分别对应为
setStart(startContainer,startOffset);setEnd(endContainer,endOffset);
以上就是range对象的基本属性和选择⽅式，分为selection选择和⾃⼰输⼊参数创建；下⾯就是实际操作range对象，让其实现富⽂本编辑；
insertNode：插⼊节点，创建⼀个节点，⽐如span标签，插⼊到这个range对象的开始处；⽤法：range.insertNode(span标签);
surroundContent：环绕节点，创建⼀个节点，⽐如span标签，把range对象添加进这个span标签。⽤处：⼀般⽤来设置其CSS样式等⽐如设置背景⾊；⽤法:range.surroundContents(span标签);（注：这个⽅法只能⽤于startContaienr和endContainer都是⽂本节点并且range没有跨标签。⽐如” 台：“我们发现问题晚了点。<b>我们承认这⼀ “ 这种不⾏，要报错，解决⽅法是⽤extractContents⽅法提出来，添加进span，使⽤insetAdjacentHTML添加；
extractContents：提取并删除range对象，返回⼀个document.fragment对象；相当于我们的剪切功能；这⽅法和insertAdjacentHTML配合⾮常⽜逼；例⼦：⽐如我们” 台：“我们发现问题晚了点。<b>我们承认这⼀ “ 这种range对象的话有⼀部分的B标签在⾥⾯，那么使⽤这个⽅法的话，剪切后，B标签会⾃动补全开始和闭合标签，内容为剪切剩下的内容。⽐如剪切上⾯的range后，B标签就变成了<b>失误并为此承担责任。”</b> range中含有B标签部分的⽂字也会⾃动闭合成⼀个完整的B标签例如：<b>我们承认这⼀</b>;
要使⽤insetAdjacentElement的话，必须知道调⽤insetAdjacentElement的节点为哪个。⽐如要把剪切出来的内容原原本本添加个背景⾊后还原，那么就必须知道确切的使⽤“insetAdjacentElement”的DOM节点。insetAdjacentElement可以添加在这个DOM节点的标签⾯前，内容开始前，内容结束后，标签结束后。分别为beforeBegin,beforeBegin,beforeEnd,afterEnd; 如何知道确切的调⽤这个⽅法的DOM节点呢？前⾯的selection对象的anchorNode和focusNode就派上⽤场了。我们分别得到这2个节点的⽗节点；总共有这么⼏种可能性：
1：假如起始节点的⽗节点不这个例⼦的根节点的话，那么说明range对象的anchroeNode是⼀个⼦节点⽽⾮⽂本节点，那么我们就把提取出来的range添加进span使⽤ahchorNode.insetAdjacentElement('afterEnd',span)来添到经过extractContents后⾃动闭合的起始节点的后⾯；2：假如起始⽗节点为这个例⼦的根节点，但是结束⽗节点不是的话，那么就是FocusNode.insetAdjacentElement('beforeBegin',span)来添加到这个节点的前⾯；
3：假如起始⽗节点和结束⽗节点为相同的话，那么说明这个range的anchor和FocusNode都在⼦节点⾥⾯；使⽤surroundContents即可。4：起始⽗节点为例⼦的根节点，结束⽗节点不是，那么就以结束⽗节点为起点，使
⽤FocusNode.insetAdjacentElement('beforeBegin',span)；
5：假如起始和结束⽗节点都是例⼦的话使⽤surroungContents即可。
但是有⼀点不同的是，在firefox下insetAdjacentElement不是⼀个有效的⽅法，firefox只⽀持insetAdjacentHTML。在chrome下
HTML,TEXT,ELEMENT都⽀持。
⽬前在firefox下要使⽤怎么办呢？只⽀持insetAdjacentHTML的话我们就⽤span的innerHTML来拼接⼀个新的span就是了哇
如：FocusNode.insetAdjacentElement('beforeBegin',"<span style='background-color:red'>"+span.innerHTML+"</span>") problem solved~~
IE下实现range给背景添加颜⾊等操作
IE下的selection为document.selection；获取selection选中的range对象为ateRange();
由于IE的selection对象没有anchorNode等属性，所以添加背景⾊等操作就⽤不到insetAdjacentElement这样的函数，那么是怎么样进⾏操作的呢？
IE特有的execCommad来执⾏的，这个⽅法⾮常的强⼤，可以把range对象替换为其他的⽂本，input，img标签，还可以给range对象的⽂字进⾏样式设置；
获取range对象的⽅式和W3C⼀致，分别是通过selection 来获取，还有就是通过创建range对象；
selection创建：ateRange();
range对象创建：IE可以⽤不同标签来创建不同选择区域的range对象。⽐如⽤body创建range对象，那么range对象的选择区域就是整个页⾯了：获取整个body的range:ateTextRange();⽬前IE range对象⽀持由body,input,button,textarea创建的range对象
简单的选择range对象：range.findText（”查的⽂字“)，返回⼀个bool值，true为到值，false为没到；例如上⾯的例⼦” 公司(SNCF) “ range.findText('公司(SNCF)'); 返回true，就可以使⽤execCommad操作对象了；注意：使⽤这个⽅法时候要注意range对象是由哪个标签创建的。⽐如Button创建的range对象要查由textarea创建的range对象在textarea中的值，肯定是不到的；
复杂的选择:IE range复杂的选择是通过moveStart,moveEnd来前后移动range选区；
这2个⽅法接受2个参数，第⼀个是移动的类型; 有4个类型：
character：按照字符进⾏移动，最⼩单位
word：按照单词进⾏移动；
sentence：按照句⼦进⾏移动；
textedit：直接移动到选区的结束位置，start传⼊这个参数⽆效，只有end⽅法传⼊才还效
第2个参数是数字，具体移动的个数，可以接受负值；start⽅法的数字是range开始起第⼏个开始计算；end⽅法的传⼊数字是这段range的结束位置起开始算，正数的话就是range的结束范围就是range本⾝的长度。负数的话那么就是range的长度减去负数值（绝对值）；⽐如⼀段完整的range⽂字，法国国营铁路公司(SNCF)20⽇承认, 我们要截取“铁路公司” 话看下⾯的例⼦：
这⾥⽤character来做例⼦；
那么range的范围就是创建这个range的元素的开始第4个到第8个之间的位置；
操作range对象
IE操作range对象全是通过execCommad来进⾏操作的
execCommad的参数有3个，
参数A，操作的类型⽐如设置range的css属性，剪切，复制，把range的⽂字转化成input、textarea标签等，
参数B，为bool值，在参数A为替换元素，添加链接的情况下才有⽤，⽬的为是否弹出框来确定这个操作，true为弹出，false为不弹出；
参数C，为参数A的具体属性，⽐如设置背景⾊的颜⾊，替换元素的ID属性，替换超链接的URL等；
参数A的部分参数为：
2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜⾊。
BlockDirLTR ⽬前尚未⽀持。文字拼接
BlockDirRTL ⽬前尚未⽀持。
Bold 切换当前选中区的粗体显⽰与否。
BrowseMode ⽬前尚未⽀持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建⼀个书签锚或获取当前选中区或插⼊点的书签锚的名称。
CreateLink 在当前选中区上插⼊超级链接，或显⽰⼀个对话框允许⽤户指定要为当前选中区插⼊的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR ⽬前尚未⽀持。
DirRTL ⽬前尚未⽀持。
EditMode ⽬前尚未⽀持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体⼤⼩。
ForeColor 设置或获取当前选中区的前景(⽂本)颜⾊。
FormatBlock 设置当前块格式化标签。
Indent 增加选中⽂本的缩进。
InlineDirLTR ⽬前尚未⽀持。
InlineDirRTL ⽬前尚未⽀持。
InsertButton ⽤按钮控件覆盖当前选中区。
InsertFieldset ⽤⽅框覆盖当前选中区。
InsertHorizontalRule ⽤⽔平线覆盖当前选中区。
InsertIFrame ⽤内嵌框架覆盖当前选中区。
InsertImage ⽤图像覆盖当前选中区。
InsertInputButton ⽤按钮控件覆盖当前选中区。
InsertInputCheckbox ⽤复选框控件覆盖当前选中区。
InsertInputFileUpload ⽤⽂件上载控件覆盖当前选中区。
InsertInputHidden 插⼊隐藏控件覆盖当前选中区。
InsertInputImage ⽤图像控件覆盖当前选中区。
InsertInputPassword ⽤密码控件覆盖当前选中区。
InsertInputRadio ⽤单选钮控件覆盖当前选中区。
InsertInputReset ⽤重置控件覆盖当前选中区。
InsertInputSubmit ⽤提交控件覆盖当前选中区。
InsertInputText ⽤⽂本控件覆盖当前选中区。
InsertMarquee ⽤空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph ⽤换⾏覆盖当前选中区。
InsertSelectDropdown ⽤下拉框控件覆盖当前选中区。
InsertSelectListbox ⽤列表框控件覆盖当前选中区。
InsertTextArea ⽤多⾏⽂本输⼊控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项⽬符号列表还是常规格式化块。
Italic 切换当前选中区斜体显⽰与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull ⽬前尚未⽀持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone ⽬前尚未⽀持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，⽽不是只在移动或缩放完成后更新。
电极臂MultipleSelection 允许当⽤户按住 Shift 或 Ctrl 键时⼀次选中多于⼀个站点可选元素。
Open ⽬前尚未⽀持。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换⽂本状态的插⼊和覆盖。
Paste ⽤剪贴板内容覆盖当前选中区。
PlayImage ⽬前尚未⽀持。
Print 打开打印对话框以便⽤户可以打印当前页。
Redo ⽬前尚未⽀持。
Refresh 刷新当前⽂档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat ⽬前尚未⽀持。
SaveAs 将当前 Web 页⾯保存为⽂件。
SelectAll 选中整个⽂档。
SizeToControl ⽬前尚未⽀持。
SizeToControlHeight ⽬前尚未⽀持。
SizeToControlWidth ⽬前尚未⽀持。
Stop ⽬前尚未⽀持。
StopImage ⽬前尚未⽀持。
StrikeThrough ⽬前尚未⽀持。
Subscript ⽬前尚未⽀持。
Superscript ⽬前尚未⽀持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显⽰与否。
Undo ⽬前尚未⽀持。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。
列如我们要设置背景⾊就为Commad('BackColor','true','red')；背景⾊为红⾊，其他css属性⼀直；
替换元素成TextBox并且把textbox的值设置为替换前的值:
var ;生产H
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议