這個(gè)文集是我讀w3c若干標(biāo)準(zhǔn)時(shí)的筆記，比較精煉，希望對(duì)大家有幫助床绪。
DOM Range
邊界點(diǎn)
一個(gè)range有兩個(gè)邊界點(diǎn)(boudary-points)机杜，每個(gè)邊界點(diǎn)用node和offset來(lái)表示帜讲。
node是邊界點(diǎn)的容器，它也就對(duì)應(yīng)DOM中的node椒拗，可以是Element\Comment\ProcessingInstruction\EntityReference\CDATASection\Document\DocumentFragment\Attr\Text類型的節(jié)點(diǎn)似将。但是邊界點(diǎn)的node不能是DocumentType\Entity\Notation類型。
一個(gè)range的每個(gè)邊界點(diǎn)都有一個(gè)container（node）蚀苛，這些node的父元素也是這個(gè)range的container在验，這樣，兩個(gè)邊界點(diǎn)必定有一個(gè)共有的container堵未，我們叫做這個(gè)range的根container腋舌。
如果一個(gè)range的兩個(gè)邊界點(diǎn)有相同的node和offset，那么渗蟹，我們稱這個(gè)range為collapsed Range块饺。這常常出現(xiàn)在插入光標(biāo)的情況。
selection和partial selection（選中和部分選中）
如果一個(gè)node或者16位字符位于range之中（怎樣才位于range之中雌芽，想想就知道了）授艰。那么我們說(shuō)這個(gè)node或字符被選中了（selected）。上圖中的例子膘怕，range2選中了P節(jié)點(diǎn)想诅，但是range4沒(méi)有選中那個(gè)文本節(jié)點(diǎn)。
我們說(shuō)一個(gè)節(jié)點(diǎn)被部分選中了岛心，如果這個(gè)節(jié)點(diǎn)是并且只是一個(gè)邊界點(diǎn)的Container来破。
創(chuàng)建一個(gè)range
var range = document.createRange();
創(chuàng)建的range的container是document，offset是0忘古，是一個(gè)collapsed range徘禁。
獲取邊界點(diǎn)信息：
range.startContainer;
range.startOffset;
設(shè)定邊界點(diǎn)信息：
range.setStart(node,offset)
注意node是dom類型。offset不能超出實(shí)際下標(biāo)髓堪，不然報(bào)錯(cuò)IndexSizeError: DOM Exception xx;
還有幾個(gè)常用的設(shè)定邊界點(diǎn)的接口：
range.setStartBefore(node)
range.setStartAfter(node)
合并range：
range.collapse();
判斷range是否是合并：
range.collapsed; //只讀
設(shè)定一個(gè)range選中某節(jié)點(diǎn)或節(jié)點(diǎn)內(nèi)容：
range.selectNode(node);
range.selectNodeContent(node);
判斷兩個(gè)邊界點(diǎn)的位置關(guān)系
首先這樣判斷連個(gè)邊界點(diǎn)的位置關(guān)系:
range1.compareBoundaryPoints(Range.START_TO_START,range2);
這樣就是range1的起始點(diǎn)和range2的起始點(diǎn)比較送朱。
返回值為-1,0,1娘荡，分別代表小于、等于驶沼、大于的情況炮沐。
然后：比較兩個(gè)邊界點(diǎn)的算法如下：
- 如果A點(diǎn)和B點(diǎn)有同一個(gè)container，比較他們的offset
- 如果A點(diǎn)的container是B點(diǎn)的祖先container回怜。比較A的offset和B的祖先container的位置大年。
- 同第2點(diǎn)。B的情況
- 如果以上都不是玉雾，A的container和B的container是兄弟節(jié)點(diǎn)或者是旁系血親翔试。那么比較A的container和Bcontainer在先序遍歷中的先后關(guān)系。
刪除range中的內(nèi)容
range.deleteContents();
刪除range中的內(nèi)容后复旬，如果一個(gè)node被range“選中”垦缅，那么這個(gè)node被刪除掉；如果這個(gè)node被“部分選中”驹碍，只刪除node中被選中的部分壁涎。
例如:
<div>hi <p>hel|lo </p> wor|ld</div> //兩條豎線代表邊界點(diǎn)
<div>hi <p>hel</p>|ld</div> //刪除后的結(jié)果，range合并于豎線的地方
關(guān)于合并點(diǎn)：
- 如果沒(méi)有node被部分選中幸冻，直接刪除粹庞，range合并于start位置
- 如果有node被部分選中了，range刪除后合并于元素之后或者之前洽损。
抽出內(nèi)容
提取內(nèi)容:
range.extractContents();
提取的內(nèi)容會(huì)暫時(shí)從dom節(jié)點(diǎn)中刪除庞溜。方法返回的內(nèi)容為documentFragment。
需要注意的是：如果一個(gè)node被選中碑定，這個(gè)節(jié)點(diǎn)從dom中刪除流码，直接放進(jìn)返回的documentFragment中，如果一個(gè)node被部分選中延刘，或克隆這個(gè)節(jié)點(diǎn)放進(jìn)documentFragment中漫试。
一定要注意的是，克隆一個(gè)節(jié)點(diǎn)的時(shí)候會(huì)克隆所有的attr屬性碘赖，比如ID驾荣。
克隆內(nèi)容
range.cloneContents();
插入內(nèi)容
range.insertNode(node);
在range的start處插入node，同時(shí)node也可以是一個(gè)documentFragment普泡，例如：
range.insertNode(range1.extrctContents());
包裹內(nèi)容
range.surroundContents(node);
如果range部分選擇了一個(gè)非文本節(jié)點(diǎn)播掷，那么此方法會(huì)拋出一個(gè)DOM異常。
克隆range
range.cloneRange();
獲取根container
range.commonAncestorContainer //只讀
獲取所有文本內(nèi)容
range.toString(); //返回的內(nèi)容類型為"DOMString"
文檔變化后的range情況
讓文檔中的節(jié)點(diǎn)發(fā)生了變化撼班，那么關(guān)聯(lián)的range會(huì)自動(dòng)更新歧匈。
插入
如果一個(gè)節(jié)點(diǎn)插入在range之前，那么range的startOffset和endOffset會(huì)發(fā)生變化砰嘁，container不會(huì)變化件炉。
如果一個(gè)節(jié)點(diǎn)插入的位置恰好是range的一個(gè)邊界點(diǎn)的位置勘究。w3c標(biāo)準(zhǔn)采取的策略是：盡量不要讓range的container和offset變動(dòng)。那么斟冕，在邊界點(diǎn)的位置插入一個(gè)節(jié)點(diǎn)時(shí)候口糕，會(huì)按情況選擇插入range里面還是外面】纳撸看下面的例子：
<div>|wor|ld</div>
//然后在start的位置插入hello走净，結(jié)果是
<div>|hello wor|ld</div> //這樣保證了startOffset一直是0不變
//或者在end的位置插入pew!，結(jié)果是
<div>|wor|pre!ld</div> //這樣保證了start和end的位置都沒(méi)變
刪除節(jié)點(diǎn)
刪除一個(gè)節(jié)點(diǎn)后range的變化情況孤里，可以想象成要?jiǎng)h除的范圍range2.deleteContents()后這個(gè)range1怎么變化。
- 如果range1的邊界點(diǎn)在range2之內(nèi)橘洞，那么range2.deleteContents()之后捌袜，range2.會(huì)合并，那么range1的這個(gè)邊界點(diǎn)也會(huì)合并到和range2同一點(diǎn)上炸枣。
- 如果range1的邊界點(diǎn)在range2之后虏等，那么range2刪除后可能會(huì)更新range1這個(gè)邊界點(diǎn)的offset。
- 如果range1的邊界點(diǎn)在range2之前适肠，那么range2的刪除對(duì)range1的這個(gè)邊界點(diǎn)沒(méi)有影響霍衫。
