HTML5 编辑 API 之 Range 对象
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600px" height="400px"></embed>//embed是一个内嵌的元素
</object>
</article>
呈现效果：
选取用法
<body>
<script>
function rangeTest(){
var html;
showRangeDiv= document.getElementById("showRange");
selection=document.getSelection();
if(selection.rangeCount>0){
html="您选取了>"+selection.rangeCount+"<内容<br/>"
for(var i=0;i<selection.rangeCount;i++){
var range= selection.getRangeAt(i);
html+="第"+(i+1)+"段内容为:"+range+"<br/>";
}
showRangeDiv.innerHTML=html;
}
}
</script>
Selection对象与Range对象的使用
<input type="button" value="点击我" onclick="rangeTest()" />
<div id="showRange"></div>
</body>
现实内容为：
删除元素和内容：
<body>
<script>
function deleteRangeContent(onlyContent){
var div=document.getElementById("div");
var rangeObj=document.createRange();
if(onlyContent){
rangeObj.selectNodeContents(div);
rangeObj.deleteContents();
}else{
rangeObj.selectNode(div);
rangeObj.deleteContents();
}
}
</script>
<div id="div" style="background-color:#0F3; width:300px; height:200px;">元素中的内容</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
删除文字：
<body>
<script>
function deleteChar(){
var div=document.getElementById("myDiv");
var textNode=div.firstChild;
var rangeObj=document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}
</script>
<div id="myDiv" style="color:#0F3;">这段文字是用来删除的</div>
<button onclick="deleteChar()">删除文字</button>
</body>
删除表格：
<body>
<table id="myTable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
<button onclick="deleteRow()">删除第一行</button>
<script>
function deleteRow(){
var table= document.getElementById("myTable");
if(table.rows.length>0){
var row=table.rows[0];
var rangeObj=document.createRange();
rangeObj.setStartBefore(row);
rangeObj.setEndAfter(row);
rangeObj.deleteContents();
}
}
</script>
克隆：
<body>
<script>
function cloneRange(){
var rangeObj=document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone=rangeObj.cloneRange();
alert(rangeClone.toString());
}
</script>
<p id="p">这里是随便书写的内容</p>
<button onclick="cloneRange()">克隆</button>
</body>
克隆//2：
<body>
<script>
function cloneContent(){
var div=document.getElementById("div");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(div);
var docFrangeMent=rangeObj.cloneContents();
div.appendChild(docFrangeMent);
}
</script>
<div id="div">
你好吗？
<br/>
<button onclick="cloneContent()">克隆</button>
<br/>
</div>
</body>
移动元素：
<body>
<script>
function moveContent(){
var srcDiv=document.getElementById("srcDiv");
var distDiv=document.getElementById("distDiv");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(srcDiv);
var docFragment= rangeObj.extractContents();
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="background-color:#093; width:300px; height:50px">你好么</div>
<div id="distDiv" style="background-color:#900; width:300px; height:50px"></div>
<button onclick="moveContent()">移动元素</button>
</body>
移动按钮：
<body>
<script>
function moveButton(){
var btn=document.getElementById("button");
var selection =document.getSelection();
if(selection.rangeCount>0){
var range=selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div onmouseup="moveButton()" style="width:400px; background-color:#0F3">这里是我随便书写的内容这里是我随便书写的内容这里是我随便书写的内容这里是我随便书写的内容这里是我随便书写的内容</div>
<button id="button">按钮</button>
</body>
浙公网安备 33010602011771号