现在的位置: 网页制作教程网站制作教程 >正文
JavaScript脚本

Javascript中DOM Range操作方法

发表于2017/3/15 网站制作教程 0条评论 ⁄ 热度 1,059℃

本文介绍Javascript中DOM Range的操作方法。

Range是一种fragment(HTML片断),它包含了节点或文本节点的一部分。可以通过document.createRange()或selection象的getRangeAt()方法获得。

createRange()是在2级DOM里定义的一个方法,它属于document对象。IE是不支持此方法的,因此需要检测浏览器的支持性。

if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("Range", "2.0")) {
    var oRange = document.createRange();    // 支持
} else {
    // 不支持
}

属性

当创建一个Range对象后,该对象就有了以下属性,以下属性全为“只读”。

startContainer

包含“起点”的节点。“包含”的意思是起点所属的节点。

endContainer

包含“结束点”的节点

startOffset

“起点”在startContainer中的偏移量。

如果startContainer是文本节点、注释节点或CDATA节点,则返回“起点”在startContainer中字符偏移量。

如果startContainer是元素节点,则返回“起点”在startContainer.childNodes中的次序。

<p id="p1"><span>span</span><b id="b1">Hello</b> World</p>
<script type="text/javascript">
    var oP1 = document.getElementById('p1')
    var oB1 = document.getElementById('b1');
    var oRange = document.createRange();
    oRange.setStart(oB1.firstChild, 2); // 设置range的“起点”
    oRange.setEnd(oP1.lastChild, 3);    // 设置range的“结束点”
    alert(oRange.startOffset);          //  2,可看到“起点”在<b id="b1">Hello</b>应是第三个字符。
    alert(oRange.startContainer);       // 元素oB1.firstChild,文本节点
</script>
<p id="p1"><span>span</span><b id="b1">Hello</b> World</p>
<script type="text/javascript">
    var oP1 = document.getElementById('p1')
    var oB1 = document.getElementById('b1');
    var oRange = document.createRange();
    oRange.setStartBefore(oB1);       // 设置range的“起点”
    oRange.setEnd(oP1.lastChild, 3);  // 设置range的“结束点”
    alert(oRange.startOffset);        // 1,可以看到“起点”应是oP1的第2个子节点
    alert(oRange.startContainer);     // 元素oP1
</script>

endOffset

“起点”在endContainer中的偏移量,其它细节同startOffset。

commonAncestorContainer

第一个包含Range的节点,同时包含起点和结束点。

collapsed

起点和结束点在一起时为true;Range对象为空(刚createRange()时)也为true。

定位(设置“起点”和“结束点”)的一些方法

setStart(node, offset)和setEnd(node, offset)

setStart:设置起点的位置,node是对startContainer的引用,偏移则是startOffset;

setEnd:设置结束点的位置,node是对endContainer的引用,偏移则是startOffset;

<p id="p1"><b>Hello</b> World</p>
<script>
    var oP1 =  document.getElementById("p1");
    var oHello = oP1.firstChild.firstChild;
    var oWorld = oP1.lastChild;
    var oRange = document.createRange();
    oRange.setStart(oHello, 2);
    oRange.setEnd(oWorld, 3);
</script>

此时选中的fragment不是well-formed,浏览器会自动添加一些元素,最终形成下面的fragment。

<p  id="p1"><b>He</b><b>llo</b> World</p>

注意well-formed这一步骤是隐藏的,也就是说利用CSS中“b + b {}”是选不到第二个b元素的。

setStartBefore(referenceNode)、setStartAfter(referenceNode)

setEndBefore(referenceNode)、setEndAfter(referenceNode)

setStartBefore:将“起点”设置到referenceNode前

setStartAfter:将“起点”设置到referenceNode后

setEndBefore:将“结束点”设置到referenceNode前

setEndAfter:将“结束点”设置到referenceNode后

注意:使用这四个方法设置的“起点”或“结束点”的父节点与referenceNode的父节点是同一个元素。

selectNode(referenceNode)和selectNodeContents(referenceNode)

selectNode:设置Range的范围,包括referenceNode和它的所有后代(子孙)节点。

selectNodeContents:设置Range的范围,包括它的所有后代节点。

二者的区别:

selectNode

selectNodeContents

collapse(toStart)

折叠该范围,使它的“起点”和“结束点”重合。

参数toStart,true时折叠到Range边界的首部,为false时折叠到Range尾部,默认为false。

修改范围的方法

cloneContents()

可以克隆选中Range的fragment并返回改fragment。这个方法类似于extractContents(),但是不是删除,而是克隆。

deleteContents()

从Dom中删除Range选中的fragment。注意该函数没有返回值(实际上为undefined)。

extractContents()

将选中的Range从DOM树中移到一个fragment中,并返回此fragment。

<p id="p1"><b>Hello</b> World</p>
<script>
    var oP1 =  document.getElementById("p1");
    var oHello = oP1.firstChild.firstChild;
    var oWorld = oP1.lastChild;
    var oRange = document.createRange();
    oRange.setStart(oHello, 2);
    oRange.setEnd(oWorld, 3);
    var oFragment = oRange.extractContents();
    document.body.appendChild(oFragment);
    // 不可以使用document.body.appendChild(oRange); 因为oRange是range对象。
</script>

运行后HTML结构,体现了前面提到的well-formed原则。

<body>
  <p id="p1"><b>He</b>rld</p>
  <b>llo</b> Wo
</body>

insertNode

方法可以插入一个节点到Range中,注意会插入到Range的“起点”。

<p id="p1"><b>Hello</b> World</p>
<script>
    var oP1 = document.getElementById("p1");
    var oHello = oP1.firstChild.firstChild;
    var oWorld = oP1.lastChild;
    var oRange = document.createRange();
    var oSpan = document.createElement("span");
    oSpan.appendChild(document.createTextNode("Inserted text"));
 
    oRange.setStart(oHello, 2);
    oRange.setEnd(oWorld, 3);
    oRange.insertNode(oSpan);
</script>

运行后HTML结构:

<body>    
    <p id="p1"><b>He<span>Inserted text</span>llo</b> World</p>
</body>

surroundContents()

<p id="p1"><b>Hello</b> World</p>
<script>
    var oP1 = document.getElementById("p1");
    var oHello = oP1.firstChild.firstChild;
    var oWorld = oP1.lastChild;
    var oRange = document.createRange();
    var oSpan = document.createElement("span");
    oRange.setStart(oHello, 2);
    oRange.setEnd(oWorld, 3);
    oRange.surroundContents(oSpan);
</script>

因为部分地选择了“<b>oHello</b>”,所以会抛出“BAD_BOUNDARYPOINTS_ERR”错误(虽然会自动添加“<b>”让元素“well-formed”,仍然会报错)。下面的代码将能够正常运行:

<p id="p1"><b>Hello</b> World</p>
<script>
    var oP1 = document.getElementById("p1")
    var oRange = document.createRange();
    var oSpan = document.createElement("span");
    oRange.setStart(oP1, 0);
    oRange.setEnd(oP1.lastChild, 3);
    oRange.surroundContents(oSpan);
</script>

运行后,HTML将变成:

<p id="p1"><span><b>Hello</b>  Wo</span>rld</p>

其它的方法

cloneRange()

var oNewRange = oRange.cloneRange()。

cloneRange()方法将返回一个当前Range的副本,它也是Range对象。

注意它和cloneContents()的区别在于返回值不同,一个是HTML片段,一个是Range对象。

compareBoundaryPoints()

var compare = comparerange.compareBoundaryPoints(how, sourceRange);

compare:返回1, 0, -1.(0为相等,1为时,comparerange在sourceRange之后,-1为comparerange在sourceRange之前)。

how:比较哪些边界点,为常数。

  • Range.START_TO_START - 比较两个 Range 节点的开始点
  • Range.END_TO_END - 比较两个 Range 节点的结束点
  • Range.START_TO_END - 用 sourceRange 的开始点与当前范围的结束点比较
  • Range.END_TO_START - 用 sourceRange 的结束点与当前范围的开始点比较

sourceRange:个Range对象的边界。

detach()

虽然GC(垃圾收集器)会将其收集,但用detach()释放range对象是一个好习惯。语法为:oRange.detach();

toString()

返回该范围表示的文档区域的纯文本内容,不包含任何标签。

  • 暂无评论