html 5編集APIのrangeオブジェクト(二)
cloneRangeメソッドRangeオブジェクトのcloneRangeメソッドは、現在のRangeオブジェクトをコピーするために使用されます.このメソッドは、次のようにしてコピーされたRangeオブジェクトを返します.
var rangeClone = rangeObj.cloneRange();
var rangeClone = rangeObj.cloneRange();
<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> </button>
</code></pre>
<br/>
<div>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span><strong><span style="color:#ff0000;">cloneContents </span> </strong> HTML ， Range HTML html ；</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span> ：</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span>var html = rangeObj.cloneContents();</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span> ， DocumentFragment ， ， ， ， ， ；</span></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script>
function cloneContent(){
var p = document.getElementById("p");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(p);
var doClone = rangeObj.cloneContents();
p.appendChild(doClone);
}
</script>
<div id="p">
<p> </p>
</div>
<button> </button>
</code></pre>
<div>
<br/>
</div>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span><strong><span style="color:#ff0000;">extractContents </span></strong> Range html DocumentFragment ， HTML ；</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span> ：</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span>var documentFragment = rangeObj.extractContents();</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span> Range HTML DocumentFragment 。</span></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script>
function moveContent() {
var srcDiv = document.getElementById("srcDiv");
var destDiv = document.getElementById("destDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv);
var documentFragment = rangeObj.extractContents();
destDiv.appendChild(documentFragment);
}
</script>
<div id="srcDiv" style="width:300px;height:50px;background-color:red;">demo</div>
<div id="destDiv" style="width:300px;height:50px;background:blue;">demo2</div>
<button onclick="moveContent()"> </button>
</code></pre>
<br/>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span><strong><span style="color:#ff0000;">insertNode ：</span></strong> Range ， Range ， ， Range 。 ：</span></p>
<p style="border:0px;font-size:14px;line-height:2em;font-family:Verdana, lucida, 'lucida-sans unicode', sans-serif;text-indent:2em;"> <span>rangeObj.insertNode(node);</span></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script>
function MoveButton() {
var button = document.getElementById("button");
var selection = document.getSelection();
if(selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
range.insertNode(button);
}
}
</script>
<div style="width:400px;height:100px;background-color:red">aaaaaaaaabbbbbb</div>
<button id="button"> </button>
</code></pre>
<br/>
<p style="font-family:'Microsoft YaHei', Helvetica, 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', 'Trebuchet MS', Monaco, monospace, Tahoma, STXihei, ' ', STHeiti, 'Helvetica Neue', 'Droid Sans', 'wenquanyi micro hei', FreeSans, Arimo, Arial, SimSun, ' ', Heiti, ' ', sans-serif;font-size:14px;line-height:22px;"> <span style="color:#ff0000;"><strong>compareBoundaryPoints(how, sourceRange) </strong></span></p>
<ul style="font-family:'Microsoft YaHei', Helvetica, 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', 'Trebuchet MS', Monaco, monospace, Tahoma, STXihei, ' ', STHeiti, 'Helvetica Neue', 'Droid Sans', 'wenquanyi micro hei', FreeSans, Arimo, Arial, SimSun, ' ', Heiti, ' ', sans-serif;list-style:none;color:rgb(51,51,51);font-size:14px;line-height:22px;">
<li style="font-family:Arial, 'Microsoft YaHei';list-style:none;"> Range.START_TO_START - Range </li>
<li style="font-family:Arial, 'Microsoft YaHei';list-style:none;"> Range.END_TO_END - Range </li>
<li style="font-family:Arial, 'Microsoft YaHei';list-style:none;"> Range.START<span>TO_END - _sourceRange</span> </li>
<li style="font-family:Arial, 'Microsoft YaHei';list-style:none;"> Range.END<span>TO_START - _sourceRange</span> </li>
</ul>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script>
function testPlace() {
var boldText = document.getElementById("boldTest");
var boldRange = document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
var selection = document.getSelection();
if(selection.rangeCount>0){
var selRange = selection.getRangeAt(0);
if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<0){
alert(" ");
}else{
if(selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>0){
alert(" ");
}
}
}
}
</script>
， <b id="boldTest"> </b> 。 。
<br/>
<button> </button>
</code></pre>
<strong><br/></strong>
<p style="font-family:'Microsoft YaHei', Helvetica, 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', 'Trebuchet MS', Monaco, monospace, Tahoma, STXihei, ' ', STHeiti, 'Helvetica Neue', 'Droid Sans', 'wenquanyi micro hei', FreeSans, Arimo, Arial, SimSun, ' ', Heiti, ' ', sans-serif;font-size:14px;line-height:22px;"> <span style="color:#ff0000;"><strong>collapse() </strong></span><span style="color:rgb(51,51,51);"> 。<br/> collapse(toStart)<br/> toStart true， 。 ， 。</span></p>
<p style="font-family:'Microsoft YaHei', Helvetica, 'Meiryo UI', 'Malgun Gothic', 'Segoe UI', 'Trebuchet MS', Monaco, monospace, Tahoma, STXihei, ' ', STHeiti, 'Helvetica Neue', 'Droid Sans', 'wenquanyi micro hei', FreeSans, Arimo, Arial, SimSun, ' ', Heiti, ' ', sans-serif;font-size:14px;line-height:22px;"> <strong><span style="color:#ff0000;">detach </span></strong><span style="color:#333333;">， Range 。</span></p>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>