范围

创建 createRang()

给一段HTML

        <div id="div1">
            <p id="p1">
                <b>hello </b>world
            </p>
        </div>

有两个定义范围的方法， selectNode 和 selectNodeContents

前面的范围包括了div，后面的就不能

　　　　　　　b.selectNode(a);
            c.selectNodeContents(a);

定义下来后，本身的5大属性也尘埃落定

1. Range {}
1. collapsed: false
2. commonAncestorContainer: div#div1
3. endContainer: div#div1//指向上一级
4. endOffset: 2       //作为同类结点startOffset+1
5. startContainer: div#div1//指向上一级
6. startOffset: 1   //有一个“ ” 结点，所以是1
7. __proto__: Range

1. Range {}
1. collapsed: false
2. commonAncestorContainer: p#p1
3. endContainer: p#p1//指向上一级
4. endOffset: 2     // Text长度
5. startContainer: p#p1//指向上一级
6. startOffset: 0    //开始是0
7. __proto__: Range

---

为了更好的控制精度

又有了下面的方法

setStartBefore()

setStartAfter()

setEndBefore()

setEndAfter()

---

还有更复杂的选择

 

setStart(a,b) a:startContainer  b:startOffset

setEnd(a,b)  a:endContainer   b:endoffset

            for(i=0,len=a.parentNode.childNodes.length;i<len;i++){
                if(a.parentNode.childNodes[i]==a){
                    pos=i;
                    break;
                }
            }
            b.setStart(a.parentNode,pos);
            b.setEnd(a.parentNode,pos+1);
            c.setStart(a,0);
            c.setEnd(a,a.childNodes.length);
            console.log(b,c);

结果和上面的一样

但他的作用主要并不是这个

我们可以用它，在hello world中，截取 llo w 之类的

            var helloword=a.firstChild.firstChild;
            var worldword=a.lastChild;
            var b=document.createRange();
            b.setStart(helloword,2);
            b.setEnd(worldword,2);

 截取了这段范围

我们可以删除他  a.deleteContenes();

剪贴  var b=a.extractContents();(用b先保存他

复制 var c=a.cloneContents();

 

---

范围里面添加样式

 

            b.setStart(helloword,2);
            b.setEnd(worldword,2);
            var span=document.createElement("span");
            span.appendChild(document.createTextNode("inserted text"));
            span.style.color="red";
            b.insertNode(span);

对范围 b用insertNode函数

可以在范围前面添加有样式的文字

如果我们不想插入内容结点，单纯地想增加样式

b.surroundContents(span)

---

折叠dom范围

 

一个属性一个方法

a.collapsed    输出是true是折叠在起点，false是折叠在最后

a.collapse(true/false)  控制折叠前面还是后面

---

   比较DOM范围

方法：compareBoundaryPoints( a,b)  b表示第二个范围

a有四种

START_TO_START

START_TO_END

END_TO_END

END_TO_START   分别比较一个范围的起/终点  和 另一个范围的起/终点

返回  -1 0  1

分别表示前面  相同   后面

---

辅助DOM范围

var a=b.cloneRange()

和上面不同，那个是复制范围里面的文本，这个是范围的复制

---

用完这段范围后的清理

a.detach()

a=null;