(转)Javascript标准DOM Range操作(3)
2009-12-01 23:42
459 查看
从Range中插入一些数据
前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。
insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如Range中,将如何操作呢?
<span style="color: red">Inserted text</span>
看下面的代码:
前一节的几个方法解决了如何移除range中所选中的fragment。现在说明如何添加内容到Range中。
insertNode()方法可以插入一个节点到Range中。假如我想把以下的节点插如Range中,将如何操作呢?
<span style="color: red">Inserted text</span>
看下面的代码:
那么原来的HTML将会变成这样: <p id="p1"><b>He<span style="color: red">Inserted text</span>llo</b> World</p> surroundContents()的参数为一个node,它将这个node加入到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.style.backgroundColor = "yellow"; oRange.setStart(oHello, 2); oRange.setEnd(oWorld, 3); oRange.surroundContents(oSpan); </script>
在oRange选取的范围内有一个我们新生成的节点span,因此选取的Range的背景变成了黄色。
collapse()方法:
collapse()方法只有一个布尔型的参数,该参数为可选的,也就是说,可以有,也可以没有,默认为false。
true时折叠到Range边界的首部,为false时折叠到Range尾部。即如果你想知道该Range是否已经折叠,可以用collapsed属性来得到true或者false。看下面的例子。 <p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p> <script> var oP1 = document.getElementById("p1"); var oP2 = document.getElementById("p2"); var oRange = document.createRange(); oRange.setStartAfter(oP1); oRange.setStartBefore(oP2); alert(oRange.collapsed); //outputs "true" </script>
上面的代码输为true。虽然我们没有用collapse方法,但是由于我们的Range设置开始为1末端到p2的首端,没有任何元素。即</p>(Range开始)(Range结束)<p id="p2">,所以显示的是true。
Range边界的比较
compareBoundaryPoints()方法,语法形式如下:
compare = comparerange.compareBoundaryPoints(how,sourceRange)
参数含义:
compare —— 返回1, 0, -1.(0为相等,1为时,comparerange在sourceRange之后,-1为comparerange在sourceRange之前)
how —— 为Range常数:END_TO_END|END_TO_START|START_TO_END|START_TO_START
sourceRange —— 一个Range对象的边界。
看下面的例子:下图为这两个Range的示意图,结合代码和上面的说明,可以清晰的分析出结果了。 克隆(clone)Range 这个操作很简单,只需要一句语句即可: var oNewRange = oRange.cloneRange();
cloneRange()方法将返回一个当前Range的副本,当然,它也是Range对象。
清除Range所占的系统资源
当你创建了Range对象最好用detach()方法来清除它所占的系统资源。虽然不清除,GC(垃圾收集器)也会将其收集,但用detach()释放是一个好习惯。语法为:if (browser.isMozilla) { HTMLElement.prototype.insertAdjacentHTML = function (sWhere, sHTML) { var df; var r = this.ownerDocument.createRange(); switch (String(sWhere).toLowerCase()) { case "beforebegin": r.setStartBefore(this); df = r.createContextualFragment(sHTML); this.parentNode.insertBefore(df, this); break; case "afterbegin": r.selectNodeContents(this); r.collapse(true); df = r.createContextualFragment(sHTML); this.insertBefore(df, this.firstChild); break; case "beforeend": r.selectNodeContents(this); r.collapse(false); df = r.createContextualFragment(sHTML); this.appendChild(df); break; case "afterend": r.setStartAfter(this); df = r.createContextualFragment(sHTML); this.parentNode.insertBefore(df, this.nextSibling); break; } }; }
参考文档:
Professional JavaScript for Web Developers(Wrox)
Mozilla Develop Center Document
原文地址
------------------------------
最后给出一版很好用的兼容IE insertAdjacentHTML方法 具体解析待续:
IAHTML:function(){//insertAdjacentHTML by BlueDestiny ^_^
if(document.documentElement.insertAdjacentHTML){return;}
HTMLElement.prototype.insertAdjacentHTML = function(sWhere, sHTML){
var df = null,r = this.ownerDocument.createRange();
switch (String(sWhere).toLowerCase()) {
case "beforebegin":
r.setStartBefore(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this);
break;
case "afterbegin":
r.selectNodeContents(this);
r.collapse(true);
df = r.createContextualFragment(sHTML);
this.insertBefore(df, this.firstChild);
break;
case "beforeend":
r.selectNodeContents(this);
r.collapse(false);
df = r.createContextualFragment(sHTML);
this.appendChild(df);
break;
case "afterend":
r.setStartAfter(this);
df = r.createContextualFragment(sHTML);
this.parentNode.insertBefore(df, this.nextSibling);
break;
}
};
相关文章推荐
- Javascript标准DOM Range操作(1)
- Javascript标准DOM Range操作全集第1/3页
- (转)Javascript标准DOM Range操作(3)
- Javascript标准DOM Range操作全集第1/3页
- (转)Javascript标准DOM Range操作(1)
- (转)Javascript标准DOM Range操作(2)
- Javascript标准DOM Range操作
- Javascript标准DOM Range操作
- 1月25日 JavaScript的DOM操作
- JavaScript入门篇--你也有控制权(DOM操作)
- 你所不了解的javascript操作DOM的细节知识点(一)
- JavaScript DOM操作表格及样式
- JavaScript操作Dom的11点详解
- JavaScript-DOM操作HTML、CSS
- JavaScript对网页中节点的操作(DOM)
- javascript--DOM操作
- javascript对文档对象模型DOM的基本操作学习笔记
- Javascript操作DOM常用API总结
- 关于JavaScript中的DOM操作
- javascript DOM的操作,更新,遍历,添加