javascript选取元素的范围，可以包含父级，也可以不包含父级

//函数可以选取元素的范围，对于要选取文本的非常方便，或选取特定的子节点

 function getRange(element)
           {
           //判断是否支持range范围选取
              var sup=document.implementation.hasFeature("Range","2.0");
              var also=(typeof document.createRange=="function");
              //如果都是真，则进行范围选取
              if(sup && also)
              {
              //创建包括父级的范围
                var range1=document.createRange();
                //创建element元素本级的范围
                var range2=document.createRange();
                //获得元素
                var p1=document.getElementById(element) || document.getElementsByClassName(element)[0];
                var p1index=-1,i,len;
                for(i=0,len=p1.parentNode.childNodes.length;i<len;i++)
                {
                  if(p1.parentNode.childNodes[i]==p1)
                  {
                    p1index=i;
                    break;
                  }
                }
                //创建范围
                range1.setStart(p1.parentNode,p1index);
                range1.setEnd(p1.parentNode,p1index+1);
                //创建元素本级的范围
                range2.setStart(p1,0);
                range2.setEnd(p1,p1.childNodes.length);
                return {
                //返回选择的范围
                  range1:range1.startContainer,
                  range2:range2.startContainer
                }
                p1=null;
				 //清除范围，释放内存和引用
                range1.detach();
                range2.detach();
                range1=null;
                range2=null;
              }else
              {
                alert("浏览器不支持2.0的范围选取");
              }
           }
           //传入元素
           var p1=getRange("bd");
           	console.log(p1.range1);
            console.log(p1.range2);
            console.log(p1.range2.firstChild);
            console.log(p1.range2.childNodes[1].lastChild.data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

//html部分

<div id="container">
              <div class="bd">
                <p id="p1"><b>Hellob> world!p>
              div>
            div>
1
2
3
4
5